Question

我有以下HTML但我无法手动修改它。

<p class="class_1">
    <span class="support">Phonenr:</span> 
    1231231231 <span class="country">country1</span><br>
    312313123 <span class="country">country2</span><br>
    31231312 <span class="country">country3</span><br>
</p>

我想删除此部分：

<span class="country">country1</span><br>
312313123 <span class="country">country2</span><br>
31231312 <span class="country">country3</span><br>

所以结果是：

<p class="class_1">
    <span class="support">Phonenr:</span> 
    1231231231
</p>

Answer 1

尝试：

$('p.class_1').contents(':gt(2)').remove();

<强> jsFiddle example

只需添加一个关于其工作原理的快速解释，.contents()将返回元素以及文本和注释节点。因此，对于您的示例，.contents()包含12个元素：

0: text (a newline)
1: span.support
2: text (1231231231 )
3: span.country
4: br
5: text (312313123 )
6: span.country
7: br
8: text (31231312 )
9: span.country
10: br
11: text (a newline)

你想在节点2之后摆脱一切，所以.contents(':gt(2)').remove()很好地完成了这项工作。正如费利克斯指出的那样，由于.contents()对所有文本都很敏感，包括空格，如果内容发生变化，你必须相应地修改我的答案。

Answer 2

var node = $('.class_1 span').get(1); // get the second span
parent = node.parentNode;
var sibling;
while (sibling = node.nextSibling){ // remove the nodes
    parent.removeChild(node);
    node = sibling;
}

http://jsfiddle.net/PGKW2/

Answer 3

有很多方法可以做到这一点，具体取决于你的结构实际情况。

<span class="country">country1</span>是span元素中的第二个p元素。

因此，您可以从元素中删除此节点和每个后续节点。

$('p.class_1').each(function() {
    var $children = $(this).contents();
    var span = $children.filter('span').get(1);
    $children.slice($children.index(span)).remove();
});

DEMO

jquery：删除元素之间的内容

3 个答案: