Question

想象一下这种情况：

<span>Item 1</span> | <span>Item 2</span>

我如何定位|并删除它？另外，假设我总是需要删除|在span之前带有“第2项”，并且列表可以随着在“第2项”之后或之前添加的项目而增长。所有新项目都将包含在span中，并且它们将由|。

分隔

Answer 1

$('span').each(function() {
    if ($(this).text() == 'Item 2') {
        $(this.previousSibling).remove();
    }
});

http://jsfiddle.net/spFUG/2/

Answer 2

操纵文本节点是jquery并不完全擅长的事情之一。顺便说一句，本机浏览器API做得非常好。即使你不想经常使用它，这次你可能应该这样做。 previousSibling选择上一个节点，无论是文本节点，注释节点还是元素节点。假设它始终是您要删除的文本节点，可能是安全的：

var $elem = $(":contains('Item 2')");

$elem.map(function(){ //select the preceding node to any element we want to remove
  return this.previousSibling
}).addBack() // select the original element node as well
.remove(); // remove both

请注意，jQuery 1.8中添加了addBack。如果您使用的是旧版本，请改用andSelf。如果您只想删除文本节点，请完全删除addBack。

Answer 3

已更新

这里有一些直接的javascript会删除代码中的所有“|”

var parent = $('span').parent().get(0), children = parent.childNodes, node;

    for (node = 0;node < children.length;node++){
        if (children[node].data === " | "){
             parent.removeChild(children[node]);
        }
    }

小提琴：http://jsfiddle.net/vg3pc/

Answer 4

.contents找到文本节点。

$("#container").contents().each(function () {
    //Text node
    if (this.nodeType === 3) {
       $(this).remove();
    }
});

http://jsfiddle.net/QQsk5/

Answer 5

找到span的父级，并使用.html()和.replace()。

JAVASCRIPT：

$('span:first-child').parent().html($('span:first-child').parent().html().replace(/\|/g, ''))

样本： http://jsfiddle.net/dirtyd77/5F3kf/2/

Answer 6

抓住spans。删除一切。将跨度放回（.join，如您所愿。）

<div class='container'>
  <span>Item 1</span> | <span>Item 2</span>
</div>

var $c = $(".container");
var $spans = $c.find("span");
var htmlSpans = [];
$spans.each(function(){
   htmlSpans.push($(this).prop("outerHTML"));
});

$c.empty();
$c.append(htmlSpans.join(" "));

http://jsfiddle.net/u59Uz/

编辑：使用相同逻辑来处理这个非常具体的案例的脏黑客。正则表达式替换在管道之前和之后处理0个或更多空格。

var $c = $(".container");
var html = $c.prop("outerHTML");

$c.empty();
$c.append(html.replace(/\s*\|\s*<span>Item 2/,"<span>Item 2" ));

http://jsfiddle.net/TnXB7/1/

使用jQuery删除元素前的文本

6 个答案: