CODEWITHSUNDEEP
javascriptjqueryhtml-tablerow
like-a-trainee
like-a-trainee

Reputation: 561

Remove table row after clicking table row delete button

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>

Upvotes: 33

Views: 160523

Answers (5)

A-Sharabiani
A-Sharabiani

Reputation: 19329

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

Upvotes: 12

NcXNaV
NcXNaV

Reputation: 1751

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>

Upvotes: 0

gaurang171
gaurang171

Reputation: 9080

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

Upvotes: 7

Ram
Ram

Reputation: 144659

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

Upvotes: 47

Siren
Siren

Reputation: 446

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>

Upvotes: 39

Related Questions