How to remove parent tr

Question

UPDATE 1:

I am wondering if it has anything related to the fact that the button is inside the element that is being removed, so it will delete the button which will also delete? Perhaps this is not a problem, I just typed the text that I think of.

I just tried:

$( "input.btnX" ).click(function(event) { alert("test"); }); 

and I don’t get a warning ... Should I use live or is it on now because the buttons along with the table are dynamically generated.

ORIGINAL QUESTION:

I have a table (dynamically generated, so I don't know how many tr it has in tbody, which looks something like this:

 <table> <tbody> <tr> <td>col1</td> <td>col2</td> <td><input type="button" class="btnX" name="x" value="x" /></td> </tr> <tr> <td>col1</td> <td>col2</td> <td><input type="button" class="btnX" name="x" value="x" /></td> </tr> </tbody> </table> 

How to remove parent tr if x button is pressed? Therefore, in this example, if you click the bottom x, it should remove the bottom tr.

I tried this:

 $( "input.btnX" ).click(function(event) { $(this).parent('tr').remove(); }); 

But nothing happens.

Answer 1

Just use

  $( "input.btnX" ).click(function(event) { $(this).parent().parent().remove(); }); 

or

  $( "input.btnX" ).click(function(event) { $(this).closest("tr").remove(); }); 

As you do, happens to the parent, which is tr, and then searches for tr

See an example here http://jsfiddle.net/gYDUF/

If your table appears in javascript, you may also need to change your click to

 $("input.btnX" ).live(click, function(){ $(this).closest("tr").remove(); }); 

Answer 2

The jQuery .live() method is deprecated, and delegated event handlers should now use .delegate() (for older versions) or .on() .

The syntax for using .on() for delegated events is:

 $(document).on('click','input.btnX', function() { $(this).closest('tr').remove(); }); 

Note that the document here can also be replaced with any static parent element (future buttons) that exists during the binding of the handler.

Answer 3

Not sure if this is better, but I use parents() ...

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

Answer 4

First of all, thanks to everyone, I want to share and refuse the error that I was able to solve from this topic, my own version of the solution:

Solution Step 1: In my setup, using the "closest" instead of the parent / parents (also removes the parent, not me), worked for me:

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

Solution Step 2: Since it is "tr", put your javascript link id [i.e. # container1], instead of "tr" instead of "table" there will be a design error

  <table id="container1"> 

Solution Step 3: Remember to activate jquery on your page:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 5

Try the following:

 $( "input.btnX" ).click(function(event) { $(this).closest('tr').remove(); }); 

Since tr is not a direct parent for an input element.

EDIT: If the table is built dynamically, try using

 $( "input.btnX" ).live("click", function(event) { $(this).closest('tr').remove(); }); 

Answer 6

First of all, change the id="btnX" to class="btnX" , since the id must be unique.

You can do it:

 $( "input.btnX" ).live(function(event) { $(this).closest('tr').remove(); }); 

Answer 7

 $( "input.btnX" ).on("click", function(event) { $(this).closest('tr').remove(); }); 

This should do the job and avoid the obsolete ".live ()" (as already mentioned).

Also see this jsfiddle

Answer 8

 $("input.btnX").live("click", function(event) { $(this).closest('tr').remove(); });​ 

This fixes your problem, see this jsFiddle , which shows that it works.

Below is an update showing that it works with dynamic tables