Question

我正在使用asp.net核心剃刀引擎。我根据我的数据库中有多少行来填充我的html。我正在使用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();

这将在未来带来灵活性。

jquery隐藏this.parent似乎隐藏了一切

1 个答案: