How to delete row from table using javascript?

Question

I was trying on button click delete the row from table in javascript.I am able to do so usig jquery, but is it possible to do using pure vanilla javascript.

Is there way to use click event and delete the row ?

$(".delete").click(function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete">Del</button></td>
  </tr>
</table>

Does this answer your question? [Vanilla JavaScript .closest without jQuery](https://stackoverflow.com/questions/28406403/vanilla-javascript-closest-without-jquery) — Shoejep, Nov 17 '20 at 07:45

score 0 · Accepted Answer · answered Nov 17 '20 at 07:47

0

I added onClick for each button

function deleteRow(button) {
     const tr = button.parentNode.parentNode;
     tr.parentNode.removeChild(tr);
}

<table id="table">
  <tr>
    <td>Row 1</td>
    <td><button onClick="deleteRow(this);" class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button onClick="deleteRow(this);" class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button onClick="deleteRow(this);" class="delete">Del</button></td>
  </tr>
</table>

answered Nov 17 '20 at 07:47

Ali Faris

17,754
10
45
70

1

I feel like @P.E. Joëssel's answer is better, as it's more descriptive, and adding event listeners is better than manually repeating yourself with the `onClick="deleteRow(this);"` – Samathingamajig Nov 17 '20 at 08:02
potato , potahto – Ali Faris Nov 17 '20 at 08:05

score 0 · Answer 2 · edited Nov 17 '20 at 08:03

You should create a function for onclick event for the every <td>Del</td>. When you click on it you should get the tr parent element something like this:

And don't forget that function to the onclick event for the buttons!

const onDelete = (event) => {
  const buttonElement = event;
  const tdElement = buttonElement.parentNode;
  const trElement = tdElement.parentNode;

  trElement.remove();
}

<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete" onclick="onDelete(this)">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete" onclick="onDelete(this)">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete" onclick="onDelete(this)">Del</button></td>
  </tr>
</table>

score 0 · Answer 3 · edited Nov 17 '20 at 07:56

Everything in jQuery can be replicated in vanilla javascript. With the same html, I would do it like this:

const buttons = document.querySelectorAll('.delete');

const addRemoveListener = button => {
    button.addEventListener('click', removeListener);
}

const removeListener = event => {
  const button = event.currentTarget;
  const cell = button.parentNode;
  const row = cell.parentNode;
  row.remove();
}

buttons.forEach(addRemoveListener);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete">Del</button></td>
  </tr>
</table>

How to delete row from table using javascript?

3 Answers3