~选择器删除多个元素

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/

这是一种相当简单的方法，并且很容易看到您在代码中所做的操作。