Remove table row after clicking table row delete button

Question

Solution can use jQuery or be plain JavaScript.

I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:

<script>
function SomeDeleteRowFunction() {
 //no clue what to put here?
}
</script>

<table>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
</table>

Ram · Accepted Answer · 2012-07-19T05:18:30.123

46

You can use jQuery click instead of using onclick attribute, Try the following:

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

Demo

edited Jul 19 '12 at 05:18

answered Jul 19 '12 at 04:06

Ram

143,282
16
168
197

It's not working, I should let you know I'm dynamically adding my table rows $('.mytable tr:last').before(..... could this have anything to do with it? – like-a-trainee Jul 19 '12 at 05:15
@like-a-trainee yes, you should delegate the events, try the updated answer. – Ram Jul 19 '12 at 05:18

score 39 · Answer 2 · answered Jul 19 '12 at 04:15

39

you can do it like this:

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>

answered Jul 19 '12 at 04:15

Siren

446
3
4

Works perfect and [YouMightNotNeedJquery](http://youmightnotneedjquery.com/) for such simple task. – d.raev Dec 10 '14 at 07:11
@Siren I was pretty sure this could have been done like this! A part the thank you, do you kindly have some link where it is explained your `parentNode`(s) chain? I'd like to properly understand the "calculation" you have done. Thank you, I was not able to get rid of it. And yes, I love the fact [YouMightNotNeedJquery](http://youmightnotneedjquery.com/) – Robert Jul 26 '17 at 05:52
Saved my day. Simplest and most straight forward answer. – Ajay Kumar Jan 29 '22 at 16:35

A-Sharabiani · Answer 3 · 2023-06-22T16:55:41.790

12

Using pure Javascript:

Don't need to pass this to the SomeDeleteRowFunction():

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction"></td>

The onclick function:

function SomeDeleteRowFunction(event) {
      // event.target will be the input element.
      var td = event.target.parentNode; 
      var tr = td.parentNode; // the row to be removed
      tr.parentNode.removeChild(tr);
}

edited Jun 22 '23 at 16:55

answered Oct 31 '18 at 13:57

A-Sharabiani

17,750
17
113
128

score 7 · Answer 4 · answered Jul 19 '12 at 06:12

Following solution is working fine.

HTML:

<table>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
</table>

JQuery:

function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

I have done bins on http://codebins.com/bin/4ldqpa9

NcXNaV · Answer 5 · 2021-09-09T05:11:17.690

As @gaurang171 mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and use .remove() to remove it.

This is how we can implement it using jQuery click event instead of using JavaScript onclick.

$(document).ready(function(){
     $("#myTable").on('click','.btnDelete',function(){
         $(this).closest('tr').remove();
      });
  });

table{
  width: 100%;
  border-collapse: collapse;
}

table td{
  border: 1px solid black;
}
button:hover{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
  <th>ID</th>
  <th >Name</th>
  <th>Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td >SSS-001</td>
  <td >Ben</td>
  <td >25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-002</td>
  <td >Anderson</td>
  <td >47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-003</td>
  <td >Rocky</td>
  <td >32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-004</td>
  <td >Lee</td>
  <td >15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

Remove table row after clicking table row delete button

5 Answers5

Linked

Related