javascript - jQuery:删除带有内容的先前元素

Question

鉴于此标记:

<td>
   <a href="#">Item1</a> |
   <a href="#">Item2</a> |
   <a href="#">Item3</a> |
   <a href="#" class="refuseButton">Refuse</a>
   <div class="slideBox" style="display: none;">
        <div class="form-group">
             <div class="col-sm-12">
                   <input class="form-control" type="text" name="Description">
             </div>
        </div>
    </div>
</td>

当我点击 Refuse 链接时，我希望隐藏之前的元素及其内容 (|)。我正在使用 .prevAll() 但它删除的是元素而不是内容:

$('.refuseButton').on('click', function(event) {
    var button = $(event.relatedTarget);
    $(this).prevAll().slideToggle();
    $(this).next().slideToggle();
});

Answer 1

假设您无法更改标记(无论出于何种原因)。

您可以动态地用 div 包装 textnodes，然后隐藏包装容器。

您不能直接操作 textnode，因此您必须按照 Hacketo 在评论中的建议使用 previousSibling 将其包装起来。

$('.refuseButton').on('click', function(event) {
    var sibs = [];
    var sib = this.previousSibling;
    while (sib) {
        sibs.push(sib);
        sib = sib.previousSibling;
    }
    $(sibs).each(function() {
        $(this).wrap("div").hide();
    });
});

这个:

• 整理当前节点之前的所有节点
• 将每个包装在一个 div 中
• 隐藏div

首先整理是因为包装 then 应用 .previousSibling 将始终返回 null，因为不再有任何 sibling 。 (还有其他方法可以做到这一点 - 例如将它们全部包装然后使用 jquery .prevAll() - 或者只使用这种技术包装文本节点 - 或者只是更改 html(如果可能))。

显然这不会是幂等的，因为它会动态更改 html，但有一些方法可以解决这个问题(例如，只包装文本节点，然后在后续调用中不会有任何文本节点)。

编辑:fiddle