CODEWITHSUNDEEP
javascriptjquery
StealthRT
StealthRT

Reputation: 10542

jQuery get parent Element and hide it

Hey all I am trying to get the element from the HTML below:

<tr role="row" class="odd">
  <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
  <td>test22</td>
  <td>
     <button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
  </td>
</tr>

The jQuery code I have tried:

$("td[data-uid='" + uid + "']").parent().prev().fadeOut('slow');

The uid has the number 408bd653-c1bf value.

So I am not sure why its not finding the previous TR parent.

Upvotes: 1

Views: 807

Answers (4)

Sergiu Neagu
Sergiu Neagu

Reputation: 118

I think you should add a class to each button if you want to have many of them, not an id.

Like this:

<tr role="row" class="odd">
  <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
  <td>test22</td>
  <td>
     <button type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed deleteButton">Delete Record</button>
  </td>
</tr>

Then the JQuery:

$(".deleteButton").click(function(){
    var parent = $(this).closest("tr");
    $(parent).fadeOut(function(){
        $(this).remove(); 
    });
});

JSFiddle

EDIT:

If you want the previous tr to be deleted, try this:

$(".deleteButton").click(function(){
    var parent = $(this).closest("tr").prev("tr");
    $(parent).fadeOut(function(){
        $(this).remove(); 
    });
});

JSFiddle

Upvotes: 1

Kit Sunde
Kit Sunde

Reputation: 37065

There is no previous td. If your table looks like this:

<table>
  <tr></tr>  <!--- This gets hidden -->
  <tr role="row" class="odd">
    <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
    <td>test22</td>
    <td>
      <button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
    </td>
  </tr>
</table>

Because:

  1. $("td[data-uid='" + uid + "']") selects <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
  2. .parent() selects <tr role="row" class="odd">
  3. .prev() selects the previous element, which either is the previous <tr> or if there isn't a previous row is nothing at all.

If you want to fade out the current row (that the delete button is in) you would do this:

function deleteHit(el){
  $(el).closest("tr").fadeOut('slow');
}

Now there's a much nicer way of doing this. Change your button definition to have a class (since you'll have more of them and you're only allowed one id on the whole page):

<button data-uid="408bd653-c1bf" type="button" class="btn btn-danger btn-embossed js-delete">Delete Record</button>

<script>
  $(".js-delete").click(function(){
    $(this).closest("tr").fadeOut("slow", function(){
      // Remove the element from the DOM when the animation is done.
      $(this).remove(); 
    });
  });
</script>

Upvotes: 1

Artur Filipiak
Artur Filipiak

Reputation: 9157

Try this to hide parent tr element:

function deleteHit(el){
    $(el).closest('tr').fadeOut('slow');
}

Or to hide previous tr element:

function deleteHit(el){
    $(el).closest('tr').prev().fadeOut('slow');
}

NOTE, when using onclick attribute, you're passing this (clicked button) to the method. You should then add the button as argument (el) in your method, as shown above deleteHit(el)

Upvotes: 1

Erick Cortorreal
Erick Cortorreal

Reputation: 389

You can pass a selector to the parent method, something like this:

$("td[data-uid='" + uid + "']").parent("tr").prev().fadeOut('slow');

Upvotes: 1

Related Questions