如何在 JavaScript 中单击按钮时从 DOM 中删除一行？

Question

I have an HTML code as shown below. I have copied this from DOM and it is generated through php.

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow()" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
    <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow()" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
    <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>

The above HTML code belongs to the following screenshot:

Problem Statement:

I am wondering what JS code I need to add so that on clicking Delete button it deletes a row containing that button.

For example: If I click the 2nd row Delete button, it should delete the complete 2nd row and if I click the 1st row Delete button, it should delete the complete 1st row .

This is what I have tried:

function removeRow() {
 document.queryselector(".house-senate-committee").remove();
}

Answer 1

You can use closest to achieve it like below

 function removeRow(element) { $(element).closest('.house-senate-committee').remove(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button> <input type="text" name="code[]" style="margin-right:10px;" value="AEFA"> <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade"> </div> <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button> <input type="text" name="code[]" style="margin-right:10px;" value="AGFO"> <input type="text" name="en_desc[]" value="Agriculture and Forestry"> </div>

Answer 2

If you change your buttons to have onclick="removeRow(this)" , you can then rewrite removeRow as below to remove that button's div when it is clicked.

 function removeRow(el) { el.parentNode.remove(); }

 <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button> <input type="text" name="code[]" style="margin-right:10px;" value="AEFA"> <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade"> </div> <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button> <input type="text" name="code[]" style="margin-right:10px;" value="AGFO"> <input type="text" name="en_desc[]" value="Agriculture and Forestry"> </div>