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

之前没有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>

由于：

$("td[data-uid='" + uid + "']")选择<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
.parent()选择<tr role="row" class="odd">
.prev()选择上一个元素，该元素可能是之前的<tr>，或者如果之前的行没有任何内容，则会选择前一个元素。

如果你想淡出当前行（删除按钮所在的行），你会这样做：

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

现在有更好的方法可以做到这一点。将您的button定义更改为一个课程（因为您将拥有更多课程，并且您只允许在整个页面上使用一个ID）：

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

您可以将选择器传递给父方法，如下所示：

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

Answer 3

尝试隐藏父tr元素：

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

或隐藏上一个tr元素：

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

注意，在使用onclick属性时，您将this（点击按钮）传递给该方法。然后，您应该在方法中添加按钮作为参数（el），如上所示deleteHit(el)

Answer 4

我认为你应该为每个按钮添加一个类，如果你想拥有很多，而不是id。

像这样：

<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

编辑：

如果您希望删除之前的tr，请尝试以下操作：

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

JSFiddle

jQuery获取父元素并隐藏它

4 个答案: