JQuery получить родительский элемент и скрыть его

Question

Привет всем Я пытаюсь получить элемент из приведенного ниже HTML:

<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> 

JQuery код, который я пробовал:

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

Uid имеет номер 408bd653-c1bf значение.

Так что я не уверен, почему он не нашел предыдущего родителя TR.

Answer 1

Я думаю, вы должны добавить класс к каждой кнопке, если хотите иметь много из них, а не идентификатор.

Как это:

<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> 

Тогда JQuery:

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

JSFiddle

EDIT:

Если вы хотите предыдущий tr быть удалены, попробуйте следующее:

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

JSFiddle

Answer 2

Нет td. Если ваша таблица выглядит следующим образом:

<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> 

Потому что:

1. $("td[data-uid='" + uid + "']") выбирает <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
2. .parent() выбирает <tr role="row" class="odd">
3. .prev() выбирает предыдущий элемент, который либо является предыдущий <tr> или если ISN В предыдущей строке ничего нет.

Если вы хотите, чтобы исчезнуть из текущей строки (что кнопка удаления в) вы могли бы сделать это:

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

Теперь есть гораздо лучше способ сделать это. Изменить button определения есть класс (так как вы будете иметь больше из них, и вы разрешаетесь иметь только один идентификатор на всей странице):

<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> 

Answer 3

Вы можете передать селектор в родительском метод, что-то вроде это:

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

Answer 4

Попробуйте это, чтобы скрыть родителю tr элемент:

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

А скрывать предыдущий tr элемент:

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

ПРИМЕЧАНИЕ при использовании onclick атрибута, вы передаете this (нажал кнопку) к методу. Затем вы должны добавить кнопку в качестве аргумента (el) в свой метод, как показано выше. deleteHit(el)