1

我正在尝试 - 在一行中 - 删除单击元素的父元素和父元素的唯一兄弟元素。这是我的两线解决方案：

$(document).ready(function() {
    $('.close').click(function() {
        $(this).parent().siblings('.sibling').remove();
        $(this).parent().remove();
    });
});

这是一个工作小提琴。我希望避免两次导航 DOM，因为当我删除同级时我已经找到了单击元素的父级，我没有理由再做一次。我知道我可以将父元素和兄弟元素都包装在一个元素中，然后删除该超级元素，但此时我也想避免这种情况。

我已经研究过使用 jQuery 的.add()函数，但我似乎无法让它工作。谢谢你的帮助！

4

1 回答 1

1

您正在寻找.addBack()：

$(this).parent().siblings('.sibling').addBack().remove();

演示

  • andSelf相当于.addBack()jQuery < 1.8

使用.add()，您必须将父级存储在一个变量中以避免遍历它两次：

var $father = $(this).parent();
$father.siblings('.sibling').add($father).remove();
//one-liner without storing in a variable would traverse the DOM twice:
$(this).parent().siblings('.sibling').add($(this).parent()).remove();

如您所见，该addBack方法在这种情况下更实用。

如果元素的父元素和父元素的兄弟元素是其父元素中的唯一元素，您还可以使用：

$(this.parentNode.parentNode).empty();

演示

nativeparentNode属性比 jQuery 的.parent()方法快一点。这取决于使用哪个。

请注意，无论哪种方式，这种小遍历的开销都非常小。您的原始代码和这些版本在性能方面几乎没有差异。

于 2013-09-03T22:16:00.840 回答