remove table row from html with jquery

Question

i would like to remove a row from a table using jQuery. Here is the html:

<tr>
    <td><center><a id="remove" href="#"><span class="glyphicon glyphicon-remove"></span></a></center></td>
</tr>

my jquery script:

$('td a').on('click',function(e){
//delete code.
e.preventDefault();
$(this).parent().remove();

});

when i click on the link, nothinh happens. Anybody can help me?

What do you see if you console.log(this) inside that handler? — Taplar
– Taplar, Commented Aug 16, 2017 at 20:31
Is your code in a document.ready() call? Side note, <center> doesn't exist anymore. — j08691
– j08691, Commented Aug 16, 2017 at 20:31
Have you verified the click is registering? Also if you have more than one of the "remove" links, you should use class="remove" instead of id="remove" since there should only be one of each id on a page. — Erin Halbmaier
– Erin Halbmaier, Commented Aug 16, 2017 at 20:45
my code is in a $(document).ready(function(){ $('td a').on('click',function(e){ //delete code. e.preventDefault(); $(this).closest('tr').remove(); console.log(this); }); }); — Alex Pereira
– Alex Pereira, Commented Aug 16, 2017 at 20:58

j08691 · Accepted Answer · 2017-08-16 20:33:20Z

1

You need to either wrap your code in a $(document).ready call or move it to the end of the page before the closing body element (</body>). If you're executing that code in the head of your document you're running it against elements that don't yet exist.

Also if you want to remove the parent row, use $(this).closest('tr') instead of $(this).parent() as that would select the non-standard <center> element.

$(document).ready(function() {
  $('td a').on('click', function(e) {
    //delete code.
    e.preventDefault();
    $(this).closest('tr').remove();
  });
});

jsFiddle example

answered Aug 16, 2017 at 20:33

j08691

209k33 gold badges269 silver badges281 bronze badges

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

Collectives™ on Stack Overflow

remove table row from html with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related