Why Can't I delete TR from delete button inside TD

Question

I just want to remove the TR element from current delete image pressed...

I'm doing it:

$( "#btnDelete").click(function() {  
    $(this).parent().parent().remove();
});

See Fiddle

I can't see why it doesn't work

any tips?

You identify the button by ID and you always use the same ID. — Álvaro González, Dec 17 '14 at 17:41

score 6 · Accepted Answer · edited May 23 '17 at 10:26

6

Only one element can have a given ID in an HTML document.

Use a class here and change your code to

$( ".btnDelete").click(function() {  
    $(this).parent().parent().remove();
});

or better (because more resilient to changes in your HTML) :

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

Demonstration

If your rows or buttons are dynamically added, use the delegation binding :

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

(instead of document, you may use any permanent element in which your buttons will be added)

Related answer

edited May 23 '17 at 10:26

Community

1
1

answered Dec 17 '14 at 17:40

Denys Séguret

372,613
87
782
758

thanks, if it is in the html document it works just fine, if it it is a dynamically created TR(by using .append(...) ) it doesnt. – RollRoll Dec 17 '14 at 18:06

score 1 · Answer 2 · answered Dec 17 '14 at 17:42

1

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

answered Dec 17 '14 at 17:42

Coder

240
2
4
20

score 1 · Answer 3 · answered Dec 17 '14 at 17:43

1

Use a class instead and reference it as .btnDelete

code should change to

$('.btnDelete').click(function(){
    $(this).parents('tr').remove();
});

answered Dec 17 '14 at 17:43

Cayce K

2,288
1
22
35

score 0 · Answer 4 · answered Dec 17 '14 at 17:41

0

Well, it does work. The thing is you have given the same id for all three buttons. You should consider using a class for that purpose.

answered Dec 17 '14 at 17:41

aldux

2,774
2
25
36

score 0 · Answer 5 · answered Dec 17 '14 at 18:11

You should use classes for your buttons, because IDs have to be unique in your document and for dynamically added elements you have to use event-delegation:

$(document).on('click', '.btnDelete', function(){
    $(this).parents('tr').remove();
});

DEMO

Why Can't I delete TR from delete button inside TD

5 Answers5