javascript - 如何根据子元素的 data-* 属性获取 ？

Question

我已经可以获取数据的 id，但问题是如何在 html 上找到该数据

这是我的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>

所以当弹出窗口...它会显示按钮，这是 .submitDelete

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

和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);
});

编辑1我添加了 jsfiddle 这样你们就知道流程了

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

编辑2 http://jsfiddle.net/sdxaV/12/

Answer 1

根据您提供的 HTML，.submitDelete 元素没有 card_id 属性。

因此，按顺序将$(".submitDelete").data('card_id')改为$(this).attr('data-id')检索被单击元素的正确属性，而不是第一个匹配元素。

您还试图选择 table 元素，它是 #cards 元素的后代。表格元素的 id 为 #cards，因此选择器应为 $("table#cards ...")。或者从选择器中省略 table。

然后获取最近的 tr 元素，链.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();
});