Question

我正在尝试删除<h1>Title</h1>元素之后的所有特定元素类型，但仍保留一些元素类型：

    <h1>Keep</h1>
    <br />
    <label>Keep</label><br />
    <label>Keep</label><br />
    <h1>Title</h1>
    <br />
    <label>Remove</label><br />
    <input type="text" value="remove" /><br />
    <input type="text" value="remove" /><br />
    <label>Remove></label><br />
    <input type="text" value="remove" /><br />
    <p>Remove</p>
    <br />
    <hr />Keep <span>Keep</span>

我目前的代码完美无缺：

    $('h1:contains("Title")').prev('br').remove();
    $('h1:contains("Title") ~ br').remove();
    $('h1:contains("Title") ~ label').remove();
    $('h1:contains("Title") ~ input[type="text"]').remove();
    $('h1:contains("Title") ~ p').remove();
    $('h1:contains("Title")').remove();

但我正在寻找一种以最有效的方式压缩它的方法。

使用$('h1:contains("Title") ~ br, label, input[type="text"], p)似乎不会选择这些元素，而是选择页面上所有这些类型的元素。

预期产出：

<h1>Title</h1>
<hr />Keep <span>Keep</span>

Answer 1

使用nextUntil方法：

$('h1:contains("Title")').nextUntil('hr').remove();

如果您想要删除h1元素：

$('h1:contains("Title")').nextUntil('hr').addBack().remove();

http://jsfiddle.net/ZLHVF/

Answer 2

您可以通过将title元素保存到jQuery对象来修剪一些选择器：

var title = $('h1:contains("Title")');
$(title).prev('br').remove();
$(' ~ br, ~ label, ~ input[type="text"], ~ p', title).remove();
$(title).remove();

这是一个演示这个的小提琴（红色背景而不是删除元素）：http://jsfiddle.net/cetNE/

这是一种相当简单的方法，可以很容易地看到你在代码中做了什么。

〜选择器删除多个元素

2 个答案: