How to get the <tr> based on the data-* attribute of a child element?

Question

I can get the id of the data already but the problem how to find that data on html

this is my html

<table cellspacing="0" cellpadding="0" border="0" id="cards" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Description</th>
            <th>By</th>
            <th>Total Votes</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>If the opening scene of this show scared you as a kid, DRINK!</td>
            <td>testing testing</td>
            <td>1</td>
            <td>
                <a data-id="1" data-target="#viewCard" data-toggle="modal" class="btn btn-default btn-xs view" href="#"><span class="fa fa-eye"></span> View Card</a>
                <a data-id="1" data-target="#editCard" data-toggle="modal" class="btn btn-primary btn-xs edit" href="#"><span class="fa fa-edit"></span> Edit</a>
                <a data-id="1" data-target="#deleteCard" data-toggle="modal" class="btn btn-danger btn-xs delete" href="#"><span class="fa fa-remove"></span> Delete</a>
            </td>
        </tr>
        ...
    </tbody>
</table>

so when the popup out... It will show button and this is the .submitDelete

<a href="#" data-id="" class="btn btn-danger btn-xs submitDelete">Delete</a>

and js

 $(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        var card_id     = $(".submitDelete").data('card_id');
        var test = $("#cards table tr .delete[data-id='"+card_id+"']"); //<---- idk how to get the tr to be remove... this is what I've tried so far.
        console.log(test);
});

EDIT1 I added jsfiddle so you guys know the flow

http://jsfiddle.net/sdxaV/1/

EDIT2 http://jsfiddle.net/sdxaV/12/

Answer 1

Based on the HTML you provided, the .submitDelete element does't have a card_id attribute.

Therefore, change $(".submitDelete").data('card_id') to $(this).attr('data-id') in order to retrieve the correct attribute of the clicked element, rather than the first matching element.

You were also trying to select a table element that is a descendant of a #cards element. The table element has an id of #cards , therefore the selector should be $("table#cards ...") . Or omit table from the selector.

Then to get the closest tr element, chain .closest('tr') :

Working Example

$(document).on('click', '.submitDelete', function(e) {
  e.preventDefault();

  var card_id = $(this).attr('data-card_id');
  var $row = $("table#cards tr .delete[data-id='" + card_id + "']").closest('tr');

  $row.remove();
});

Answer 2

I always use jQuery.closest() for this sort of thing. It will navigate up ancestors until it matches.

 $(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        var test = $(this).closest('tr');
        console.log(test);
});

In this circumstance, this is the .submitDelete button that was clicked.

Answer 3

With a Helper Library

The easiest way to do this is instead of making your own method to do this, pull in a library that already wraps the Bootstrap modal like Bootbox . Your example's delete link would be changed to the following:

<a data-id="1" class="btn btn-danger btn-xs delete" href="#"><span class="fa fa-remove"></span> Delete</a>

Your Javascript would be updated to the following:

$(document).on('click', '.delete', function(e){
        e.preventDefault();

        var $row = $(this).closest('tr');
        bootbox.confirm("Are you sure?", function(result) {
             $row.remove();
        }); 
});

Notice that we aren't using Bootstrap's HTML attributes to load up the modal anymore. Bootbox is creating the modal for us.

With Vanilla Bootstrap/jQuery

To do this with straight Bootstrap, I would again not use the Bootstrap HTML attributes to directly load up the modal. Something like the following would work. Notice it's not as clean, but this could easily be cleaned up depending on how your JavaScript is setup.

var $row = null;
$(document).on('click', '.delete', function(e){
        e.preventDefault();

        $row = $(this).closest('tr');

        $('#deleteCard').modal();
});

$(document).on('click', '.submitDelete', function(e){
        e.preventDefault();

        if($row != null) { $row.remove(); $row = null; }
});

One way of cleaning this up would be to put the card id on a data attribute of the modal. It removes the need to store it in a variable somewhere else. Again, cleaning this up requires looking in-depth into what your JavaScript looks like. Good luck.

Answer 4

This is your anchor element <a> :

var test = $("#cards table tr .delete[data-id='"+card_id+"']");

Though it can be shortened. As this will refer to the anchor that was clicked inside the function passed to the on() method. To make it a jQuery object you will need to pass this to $ , $( this ); .

Now you need to traverse up through the DOM to the table row <tr> . jQuery provides a method called closest() to do this.

var link = $( this );
var tr = link.closest( 'tr' );
// Do what you need to with variable tr.