jquery hide this.parentはすべてを隠すようです

Question

私はasp.netコア剃刀エンジンを使用しています。私は私のデータベースにいくつの行があるかに基づいて自分のhtmlを設定します。私はDBから項目を削除するためにajaxを使用しています。それは動作しますが、私はちょうど削除されたデータを隠す方法を見つけることができません。 $(this).hide()を使用すると、削除ボタンが非表示になります。私が試みると$(this).parent().hide()すべての私のデータが非表示になっています。ここで

は私のコード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.update').click(function(){ 
        $(this).parent().submit(function(event){ 
         event.preventDefault(); 
         var $form = $(this); 
         url = $(this).attr("action"); 
         term = $form.find("textarea[name='Description']").val(); 
         var posting = $.post(url, { Description: term }); 
        }); 
       }); 
       $('.delete').click(function(){ //This is my delete function 
        $(this).parent().submit(function(event){ 
         event.preventDefault(); 
         var $form = $(this); 
         url = $form.attr("action"); 

         var posting = $.post(url); 
         $(this).parent().hide(); 
        }); 
       }); 
       $('button').click(function(){ 
        $('#New_Note').submit(function(event){ 
         event.preventDefault(); 
         var $form = $(this); 
         url = $form.attr("action"); 

         term = $form.find("input[name='Note']").val(); 
         console.log(term); 
         var posting = $.post(url, { Note: term }); 

         posting.done(function(data) { 
         var content = $(data).find("#content"); 
         console.log(content); 
         // <!--$("div").append(term);--> 
         var r= $('<p>term</p>'); 

        }); 
        }); 
       }); 
      }); 
     </script> 


@model ajaxNotes.Models.Home 

<div class = "notes"> 
    @{ 
     if(ViewBag.Notes != null) 
     { 
      foreach(var note in ViewBag.Notes) 
      { 
       <p>@note.Note</p> 
       <form action="/delete/@note.Id" method="post" id="delete_note"> 
        <input type="submit" name="submit" value="Delete" class='delete'/> 
       </form> 


       <form action="/AddDescription/@note.Id" method="post" class="update_note"> 
        <label asp-for="Description" ></label> 
        <textarea name="Description" id="" cols="30" rows="10" class="Description">@note.Description</textarea> 
        <input type="submit" name="submit" class="update" value="Update"/> 
       </form> 
      } 
     } 
    } 
</div> 

<form asp-controller="Home" asp-action="AddNote" method="post" id="New_Note"> 
    <label asp-for="Note" ></label> 
    <p><input asp-for="Note" class = "Note" name="Note"/> </p> 
    @{ 
     if(ViewData["error"] != null) 
     { 
      <p>Please enter data for Notes</p> 
     } 
    } 
    <button type="submit">Add Note</button> 
</form> 

である私は、削除ボタンを押した後、私は削除ボタン を押す前に、これはイメージです。

Answer 1

クエリを複雑にする代わりに。各音符を囲むdivを追加します。

例：

<div class="notes"> 
    @{ if(ViewBag.Notes != null) { foreach(var note in ViewBag.Notes) { 
    <div> 
    <p>@note.Note</p> 
    <form action="/delete/@note.Id" method="post" id="delete_note"> 
     <input type="submit" name="submit" value="Delete" class='delete' /> 
    </form> 


    <form action="/AddDescription/@note.Id" method="post" class="update_note"> 
     <label asp-for="Description"></label> 
     <textarea name="Description" id="" cols="30" rows="10" class="Description">@note.Description</textarea> 
     <input type="submit" name="submit" class="update" value="Update" /> 
    </form> 
    </div> 
    } } } 
</div> 

その後、我々は、クエリを使用することができます。

$(this).parent().hide(); 

これは、将来の柔軟性につながります。