Delete a table row by selecting one of that table row's cell

Question

Snippet:

$(document).ready(function() {
  $('button').click(function() {
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
  });
  $('th').on('click', '#no', function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>X</td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

I want a row to be deleted when I click the X on that row. What code should I add to do so?

Possible duplicate of [Remove table row after clicking table row delete button](https://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-button) — S4NDM4N, Aug 30 '17 at 05:50

score 1 · Answer 1 · answered Aug 30 '17 at 05:17

Here you go with a solution https://jsfiddle.net/wfLu3Lzu/

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    $('table').on('click', 'tr #no', function(){
        $(this).closest('tr').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <th>Delete</th>
    <th> Element</th>
</tr>
<tr>
    <td id='no'>
        X
    </td>
    <td>Example</td>
</tr>
</table>
<br>
<button>
More
</button>

Event delegation should start from table till tr #no

Hope this will help you.

Milan Chheda · Answer 2 · 2017-08-30T05:29:44.213

Instead of

$('th').on('click', '#no', function(){

You should be using event delegation:

$(document).on('click', '#no', function(){

Here is the working demo for you:

$(document).ready(function() {
  $('button').click(function() {
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
  });
  $(document).on('click', '#no', function() {
    $(this).parent().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>
      X
    </td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

score 1 · Answer 3 · answered Aug 30 '17 at 05:26

You keep appending elements with the same ID, that are dynamically inserted after the event handler is bound.

You can easily create the element, with the event handler, at the time it's inserted, and use a class for styling rather than duplicate ID's

$(document).ready(function() {
  $('#no').on('click', function() {
    $(this).closest('tr').remove();
  });
  
  $('button').click(function() {
    var tr  = $('<tr />'),
        td1 = $('<td />', {
          'class' : 'no',
          text    : 'X',
          on : {
            click : function() {
              tr.remove();
            }
          }
        }),
        td2 = $('<td />', {
          text : 'Example'
        });
  
    $('table').append(tr.append(td1, td2))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>
      X
    </td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

Farhad Bagherlo · Answer 4 · 2017-08-30T05:23:48.270

$(document).ready(function(){
    $('button').click(function(){
      $('table').append("<tr><td onclick='removeRow(this)' id='no'>X</td><td>Example</td></tr>");
    });
});
function removeRow($this){
        $($this).parent().remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <th>Delete</th>
    <th> Element</th>
</tr>
<tr>
    <td onclick='removeRow(this);'  id='no'>
        X
    </td>
    <td>Example</td>
</tr>
</table>
<br>
<button>
More
</button>

score 0 · Answer 5 · edited Aug 30 '17 at 05:18

0

You should follow event delegation for dynamically created html elements. check the bold code I have changed.

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    **$(document)**.on('click', ''th' #no', function(){
        **$(this).parent('th:first').remove();**
    });
});

edited Aug 30 '17 at 05:18

Krushnakant Ladani

677
5
18

answered Aug 30 '17 at 05:16

Himanshu Upadhyay

6,558
1
20
33

score 0 · Answer 6 · answered Aug 30 '17 at 05:19

You X button is in td tag and you are trying to bind event on th tag.

can you please try this

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    $('table').on('click', '#no', function(){
        $(this).parent().remove();
    });
});

score 0 · Answer 7 · answered Aug 30 '17 at 05:20

0

Try this one:

$('tr').on('click', '#no', function(){
        $(this).closest('tr').remove();
    });

answered Aug 30 '17 at 05:20

Rakib

643
7
17

score 0 · Answer 8 · answered Aug 30 '17 at 05:20

0

This function will locate the td cliacked and remove the tr it was belong.

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

Hope it solved your porblem.

answered Aug 30 '17 at 05:20

jek

148
1
1
12

Delete a table row by selecting one of that table row's cell

8 Answers8