CODEWITHSUNDEEP
jqueryjquery-selectors
oshirowanen
oshirowanen

Reputation: 15925

How to delete a parent tr

UPDATE 1:

I'm wondering if it has anything to do with the button being within the element which is being deleted, so it would end up deleting the button which does the deleting too? That might not be the problem, I was just typing that I'm thinking.

I've just tried:

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

and I don't get an alert... Should I be using 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 won't know how many tr's 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 do I delete the parent tr if an x button is clicked? So in this example, if the bottom x is clicked, it should remove the bottom tr.

I've tried this:

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

But nothing happens.

Upvotes: 14

Views: 35067

Answers (8)

Dean Jasper
Dean Jasper

Reputation: 21

First thanks everyone, I want to share and give back from the error I was able to solve from this thread, my own version of solution:

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

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

Solution step 2: Since it is 'tr', placed your the javascript reference id [i.e. #container1], on the 'table' instead on 'tr' otherwise there will be a design error

    <table id="container1">

Solution step 3: Don't forget to activiate jquery in your page: 

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

Upvotes: 2

nbrooks
nbrooks

Reputation: 18233

The jQuery .live() method has been 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 document here can also be replaced by any static parent element (of the future buttons) that exists at the time the handler is bound.

Upvotes: 4

Tom Feiner
Tom Feiner

Reputation: 184

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

This should do the job and avoids deprecated ".live()" (as already mentioned).

Also see this jsfiddle

Upvotes: 4

Chris
Chris

Reputation: 27384

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

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

Here is an update that shows it working with dynamic tables

Upvotes: 0

Tomer
Tomer

Reputation: 17930

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

then you can do this:

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

Upvotes: 2

Dominic Green
Dominic Green

Reputation: 10258

Just use 

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

Or

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

As what you are doing is going to the parent which is the tr and then looking for a tr

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

If your table is beeing rendered by javascript you may also have to change your click on 

$("input.btnX" ).live(click, function(){

     $(this).closest("tr").remove();
});

Upvotes: 37

Lixus
Lixus

Reputation: 296

Try this:

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

As the tr is not a direct parent to the input element.

EDIT: If the Table is built dynamically, try using

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

Upvotes: 4

designosis
designosis

Reputation: 5263

Not sure if it's better, but I use parents()...

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

Upvotes: 3

Related Questions