尝试删除HTML元素的父级

Question

I'm trying to delete the parent of a HTML element with the use of JQuery. The click event concern the span element, i'm trying by then to delete the whole <tr> elements.

Here's the DOM tree :

{% for element in elements %}
 <tr>
  <th scope=row>Kate</th>
    <td><span id="update">Update</span></td>
    <td id="delete">Delete</td>              
  </tr>
{% endfor %}

And here's the JQuery code trying to delete the parent element of td > span.

$('body').on('click','#delete',function(){
   var td = $(this).parent();
   $(td).parent().fadeOut('slow');
});

This code never work for me, so any one to help please.

Answer 1

first of all don't assign id to the delete button

{% for element in elements %}
 <tr>
  <th scope=row>Kate</th>
    <td><span id="update">Update</span></td>
    <td class="delete">Delete</td>              
  </tr>
{% endfor %}

Now assign the click event handler to the delete class

$('body').on('click','.delete',function(){
   $(this).parent().parent().fadeOut('slow', function(){
     $( this ).remove();
   });
});

Answer 2

您可以使用：

$(".your_child_element").unwrap()