CODEWITHSUNDEEP
jqueryhtmlhtml-table
Lucian cahil
Lucian cahil

Reputation: 83

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

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?

Upvotes: 0

Views: 89

Answers (8)

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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>

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(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>

Upvotes: 0

jek
jek

Reputation: 148

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.

Upvotes: 0

Rakib
Rakib

Reputation: 643

Try this one: 

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

Upvotes: 0

Krushnakant Ladani
Krushnakant Ladani

Reputation: 673

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

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

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

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 1

Related Questions