使用jQuery删除元素前的文本

Question

想象一下这种情景：

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

我该如何定位并删除 | 符号？并且，假设我总是需要在带有“Item 2”的 span 前删除 |，列表可以通过在“Item 2”之前或之后添加项目来增长。所有新项目都将被包含在 span 中，并且它们将用 | 分隔。

- user1729506

---

您需要同时删除空格还是仅删除单个|字符？ - Leeish

这是一串文本字符串，还是DOM的一部分？ - Sam Selikoff

是的，这已经在页面中了吗？还是只是在JavaScript变量中？ - R Esmond

不使用实际的 |，我会使用 CSS 并设置 border 属性的样式。 - elclanrs

操作文本节点并不是 jQuery 擅长的事情。也许使用原生 DOM 会更容易。 - John Dvorak

HTML已经输出，我将使用jQuery进行操作。我无法更改初始输出或使用|的事实。我只需要定位在“Item 2”之前的|并将其删除。空格不是很重要。 - user1729506

Answer 1

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

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

- dersvenhesse

---

如果我能操纵HTML或输出它的内容，那就太好了。笑不幸的是，我不能这样做。HTML已经输出，我必须按原样操纵它。我无法在那个层面上进行更改。 - user1729506

看起来不错。演示很好。但对我不起作用。不确定为什么。非常感谢你的尝试。 - user1729506

控制台中是否有错误？您是否使用完全相同的代码和jQuery版本等？ - dersvenhesse

控制台没有抛出任何错误。竖线仍然存在。这是我使用完全相同的页面HTML（只有虚拟文本）制作的jsfiddle：http://jsfiddle.net/uFawq/，它可以正常工作。但在实际页面上却不行。我想象中，IF语句中使用的确切文本没有被识别。请记住，这不是我的HTML，所以我无法更改它。我必须使用此覆盖JQuery文件来操作它。 - user1729506

所以你需要在实际页面上进行调试。 在循环中执行以下操作：console.log($(this).text() == ' Some-Name2 From-Where - City, Illinois: [phone] ')。那是if分支的测试，至少需要一个“true”输出。如果没有，则仅记录$(this).text()以更接近问题。如果jQuery版本和其他所有内容匹配，则可能只是个小问题。;) - dersvenhesse

在实际页面上进行调试，结果发现在 span 前面不仅有一个 |。我没想到空格会被识别为文本或其他节点。使用两个删除操作解决了问题。为了保险起见，考虑到我测试的文本字符串输出非常糟糕，我使用正则表达式去除空格和回车后进行比较。总的来说，你提供的方法很有效。非常感谢。 - user1729506

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

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

- John Dvorak

---

如果您正在使用旧版本的jQuery，请改用andSelf。addBack是在1.8中添加的。 - John Dvorak

$().map确实返回一个jQuery对象。我刚刚检查过了。 - John Dvorak

现在返回 "SyntaxError: Unexpected token ILLEGAL"。 - user1729506

@user1729506请展示你的代码。语法错误很少是我的错。 - John Dvorak

我直接使用了你的代码，只将“Item 2”替换为实际文本。根据你的最终建议，我去掉了.addback/andself，这样就消除了所有错误。但是它仍然不能去掉 | 符号。 - user1729506

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/

- Evan

Answer 4

.contents 找到文本节点。

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

http://jsfiddle.net/QQsk5/

- Explosion Pills

---

您不想删除 所有 文本节点。 - John Dvorak

@JanDvorak 它并不会移除子文本节点，只会移除元素节点。 - Explosion Pills

好奇一下，这个是如何知道只移除“|”的？ - user1729506

@user1729506，它不会从body中删除文本节点（在我的示例中），但它们不会从spans中删除，因此它们仍然存在于文档中。虽然如此，但这对您的目的应该是有效的。 - Explosion Pills

Answer 5

找到 span 的父元素，然后使用 .html() 和 .replace() 方法。

JAVASCRIPT：

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

DEMO: http://jsfiddle.net/dirtyd77/5F3kf/2/

- Dom

Answer 6

获取 spans。移除所有内容。将 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/

编辑： 使用相同的逻辑来处理这个非常特殊的情况的肮脏hack。正则表达式替换处理管道前后的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/

- Malk

---

这似乎是删除所有的 | 实例，而不是特定的实例。我需要针对并仅删除在“Item 2”之前出现的那个。 - user1729506

对不起，我误解了。也许其他答案能帮到你。 - Malk

只是为了解决特定的问题，我认为使用 previousSibling 方法更好。 - Malk