How to delete a row from DOM on button click in JavaScript?

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();
}

Unfortunately, we can't change the DOM(HTML). Its generated through php. — flash, Feb 17 '20 at 14:43
Well, if it ever becomes an option, I would recommend keeping markup / styles / logic separate. Here's an [example](https://jsfiddle.net/z93nu0c5/) based on the code in your question. — volt, Feb 17 '20 at 14:56

score 3 · Answer 1 · answered Feb 17 '20 at 01:43

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>

score 2 · Accepted Answer · answered Feb 17 '20 at 00:59

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>

answered Feb 17 '20 at 00:59

Nick

138,499
22
57
95

Thanks for the help. I have copied the answer and it is working as I expected. The DOM which I have mentioned in the question above is generated through php. Here is the [php code](https://3v4l.org/757so) which I have used which is generating the DOM above. – flash Feb 18 '20 at 16:06
On click of a **Delete** button, it deletes the row from the DOM but on refreshing the page, the **deleted row** comes back again because everything is pulled from the JSON. Here is the content in the JSON which I have **{"code":["AEFA","AGFO"], "en_desc":["Foreign Affairs and International Trade","Agriculture and Forestry"]}** – flash Feb 18 '20 at 16:17
The question which I have is on click of a **Delete** button, it is deleting the row from the **DOM** through JS code but on refreshing the page the deleted row comes back again. I am wondering what **php code I need to add** so that on saving the form, it deletes the values from the JSON array for the deleted row. – flash Feb 18 '20 at 16:39
Here is the updated [php code](https://3v4l.org/5JmGl) which is generating the DOM above. – flash Feb 18 '20 at 16:43
I have posted the [question](https://stackoverflow.com/questions/60271281/how-to-delete-values-from-json-object-array-in-php) as well. – flash Feb 18 '20 at 17:24
I received an answer from @Ebrahim Mohammed but I am wondering if you can give me clue how to approach that question. – flash Feb 18 '20 at 21:02

How to delete a row from DOM on button click in JavaScript?

2 Answers2