javascript - 单击按钮时将其从行中删除

Question

当用户单击一行时，它会获得一个“事件”类(“事件”类是用单独的代码块添加的，并且效果很好)。

现在我想检查该“事件”类，如果它在那里，它将删除该行单元格内的按钮。该按钮具有“add-selection”类。

这是我写的脚本，在我看来应该可以工作......但是它没有这样做。

$(document).ready(function() {
    $('tr').on('click', function(){
        if ( $(this).hasClass('.active') ) {
                $(this).parents('tr').next().remove('.add-selection');
        }
    });
});

HTML:

<tr role="row" class="even active">
   <td class="sorting_1">Cell 1 <button type="button" class="btn add-selection pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></td>
 </tr>

Answer 1

您应该能够通过添加简单的 CSS 来处理此问题:

.active button {display: none;}

这是基于这样的假设:当按钮处于事件状态时，实际上可以简单地隐藏按钮，而不是完全删除它。

此外，如果您需要维护按钮占用的空间，您可以采用这种方法:

.active button {visibility: hidden;}

<小时/>

编辑:如果您确实想从 DOM 中物理删除按钮，那么可以这样做:

$(document).ready(function() {
    $('tr').on('click', function(){
        if ($(this).hasClass('.active')) {
            $(this).find('.add-selection').remove();
        }
    });
});