JS-如何从按钮单击事件中查找特定元素TAG以将其删除？

Question

If a button in my HTML is clicked, it should search / find the next parent 'table' element and delete it completly. How can I do that? Please check JS to find out what I have already test it.

My HTML:

 <table class="table table-bordered">            
    <!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>


 <table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
    <hr class="my-4 border-dark" id="hereWeGo">
    <div class="row">
      <div class="col-auto justify-content-around d-flex flex-column border">
        <button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
      </div>
      <div class="col border">
        <B>Title...</B><br />
        <hr class="my-1">
        Link...
      </div>
    </div>
  </table>



 <table class="table table-bordered">            
    <!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>

My JS:

$(document).on('click', '.remove', function() {
//$(this).parents('table').remove();
//alert("im here");
//$(this).parents('table').remove();
//alert($(this).parents('hr').html()); 
//$('div.row').remove();

// after this is run, it should remove the <table class="table table-bordered"> element....

});

Answer 1

Use closest :

$(this).closest("table").remove();

However, your HTML is not valid: table cannot have div or hr tags as direct children, and so the table is not really the parent of the button. Browsers "fix" the error, and move all those invalid child elements out of the table .

This solution will only work if you make your table structure valid HTML. So, no children of it should be div .

For instance:

 $(document).on('click', '.remove', function() { $(this).closest("table").remove(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <hr class="my-4 border-dark" id="hereWeGo"> <table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked --> <tr class="row"> <td class="col-auto justify-content-around d-flex flex-column border"> <button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button> </td> <td class="col border"> <B>Title...</B><br /> <hr class="my-1"> Link... </td> </tr> </table> 

Answer 2

您正在寻找的是JQuery closest()函数。