Imagine this scenario:

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

How can I target the | and remove it? Also, assume I always need to remove the | before the span with "Item 2" in it, and the list can grow with items being added before OR after "Item 2." All new items will be enclosed within span and they'll be separated by |.

Imagine this scenario:

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

How can I target the | and remove it? Also, assume I always need to remove the | before the span with "Item 2" in it, and the list can grow with items being added before OR after "Item 2." All new items will be enclosed within span and they'll be separated by |.

• javascript
• jquery
• dom

• Do you need to remove the spaces too or ONLY the single | character? – Leeish Commented Feb 27, 2013 at 21:59
• 2 Is this a string of text, or part of the DOM? – Sam Selikoff Commented Feb 27, 2013 at 22:01
• Yes, is this already in the page? Or is it just in a variable in javascript? – R Esmond Commented Feb 27, 2013 at 22:02
• 1 Instead of using an actual |, I'd just use CSS and style the border property. – elclanrs Commented Feb 27, 2013 at 22:07
• 1 The HTML is already outputted and I'll be manipulating it with jQuery. I can't change the initial output, or the fact that a | is being used. I just have to target the | that's before "Item 2" and remove it. Spaces aren't a huge deal. – user1729506 Commented Feb 27, 2013 at 22:15

6 Answers 6

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

http://jsfiddle/spFUG/2/

manipulating text nodes is one of the things jquery doesn't exactly excel in. Incidentally, the native browser API does this very well. Even if you don't want to use it regularly, this time you probably should. previousSibling selects the previous node, be it a text node, a ment node or an element node. It's probably safe to assume it's always the text node that you want to remove :

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

note that addBack was added in jQuery 1.8. If you are using an older version, use andSelf instead. If you want to remove only the text node, drop addBack entirely.

.contents finds text nodes.

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

http://jsfiddle/QQsk5/

Find the parent of the spans and use .html() along with .replace().

JAVASCRIPT:

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

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

UPDATED

Here's some direct javascript that would remove all " | " from the code

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]);
        }
    }

Fiddle : http://jsfiddle/vg3pc/

Grab spans. Remove everything. Put spans back (.joined as you choose).

<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/u59Uz/

EDIT: Dirty hack using same logic to handle this very specific case. Regex replace handles 0 or more spaces before and after the pipe.

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

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

http://jsfiddle/TnXB7/1/