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 — Shoejep
– Shoejep, Commented Nov 17, 2020 at 7:45

Samathingamajig · Accepted Answer · 2020-11-17 08:03:44Z

1

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>

edited Nov 17, 2020 at 8:03

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

answered Nov 17, 2020 at 7:50

Pavel Alekseev

1,2221 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Faris · Accepted Answer · 2020-11-17 07:47:53Z

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, 2020 at 7:47

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

2 Comments

Samathingamajig Over a year ago

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);"

Ali Faris Over a year ago

potato , potahto

Samathingamajig · Accepted Answer · 2020-11-17 07:56:09Z

0

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>

edited Nov 17, 2020 at 7:56

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

answered Nov 17, 2020 at 7:53

P.E. Joëssel

1,45311 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to delete row from table using javascript?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related