-3

Read more about: Blackjack | Craps | Keno | Roulette | Slots

Would like to have the '|' character removed using jQuery. Reason is that I want to turn this into a list.

HTML below:

<div class='category-static-links'>
<a href='#'>Blackjack</a> | 
<a href='#'>Craps</a> |  
<a href='#'>Poker</a> | 
<a href='#'>Roulette</a> | 
<a href='#'>Slots</a>
</div>

Cheers!

Marco V
  • 2,553
  • 8
  • 36
  • 58
  • 2
    What did you try that hasn't worked for you so far? – Antiga Jan 18 '15 at 01:05
  • Well nothing yet, I'm kind of new to jQuery so I don't know what is best. – Marco V Jan 18 '15 at 01:09
  • 3
    You should try Google first. It would be quite easy to find a solution to remove a character from an element. SO isn't a place for you to dump code and ask for a solution. – Antiga Jan 18 '15 at 01:11
  • Search hint: you don't want to remove the pipe character, you want to `replace` it with an empty string. – souldeux Jan 18 '15 at 01:15

4 Answers4

1

Since you're new I'll cut you some slack. Please make an effort first next time. 

$('.category-static-links').contents().filter(function () {
     return this.nodeType === 3; 
}).remove();

Demo

Note that because this method removes all text content that's not in a child element, you'll probably want to add some margin or padding to separate the links:

.category-static-links a {margin-right: 8px;}
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Using `nodeType` seems like a very confusing alternative to `$('.category-static-links').html().replace(/\|+/g,"")` – souldeux Jan 18 '15 at 01:19
  • Feel free to provide an alternate answer. Your suggestion doesn't work for me as I've understood it. http://jsfiddle.net/isherwood/hgtuc694/3/ – isherwood Jan 18 '15 at 01:23
  • It works if you put single quotes around `'.category-static-links'` when defining your `myContent` variable. Your fiddle has omitted them. – souldeux Jan 18 '15 at 01:24
  • @souldeux That removes all the event handlers. The suggested solution is the the best (correct) way of removing/selecting textNodes. – Ram Jan 18 '15 at 01:24
  • @souldeux you'd have to set the element's `innerHTML` (through jQuery's `.html(htmlString)` or whatnot) then which discards all of the DOM element's children nodes and parses the HTML into new ones. This loses the event handlers and associated data of the old elements as Vohuman said. – Fabrício Matté Jan 18 '15 at 01:26
  • Huh, I wasn't aware of that. Thanks for explaining! Learn something new every day. – souldeux Jan 18 '15 at 01:27
  • Respect! Muchos gracias – Marco V Jan 18 '15 at 01:27
  • @isherwood to be on the safe side, I'd suggest adding a regex check to make sure you're not removing text nodes which should not be removed. E.g. `return this.nodeType === 3 && /^\s*\|\s*$/.test(this.nodeValue);` – Fabrício Matté Jan 18 '15 at 01:28
  • Thanks, but I'm not much use with regexes. Please feel free to add it to the answer if you like. – isherwood Jan 18 '15 at 01:36
  • You could also trim the `nodeValue`. `return this.nodeType === 3 && $.trim(this.nodeValue) === '|';` – Ram Jan 18 '15 at 01:43
1

Just

$links = $('.category-static-links');
$links.html($links.find('a'));
Anon
  • 61
  • 1
1

At the risk of answering the question you didn’t ask, may I suggest you don’t do this. If you find yourself performing regex matching against your text in order to achieve cosmetic changes, you’re probably making too much work for yourself and you will end up with code that’s hard to understand next year (or next week). I would suggest starting with a list and using css to make a single line when you need it. 

<ul id="Thelist" class='category-static-links'>
    <li><a href='#'>Blackjack</a> </li>
    <li><a href='#'>Craps</a> </li>
    <li><a href='#'>Poker</a></li>
    <li><a href='#'>Roulette</a> </li>
    <li><a href='#'>Slots</a></li>
</ul>

Then you can simply swap the class with jQuery (or vanilla javascript).

Here’s a quick, simple fiddle: http://jsfiddle.net/markm/vbto9v5q/

Mark
  • 90,562
  • 7
  • 108
  • 148
  • Mark, I voted up your answer instead of my own because even though it may not be what was _directly_ asked, I think it would work better. You addressed the root issue, i.e. could the problem be better framed? And your answer is complete and thorough. I have gotten too lazy to "steer" the OP partly because I don't want to deal with the potential backslash. Way to go! – Schien Jan 18 '15 at 02:25
0

Why does it have to be jQuery when you can just use JavaScript?

var os=document.getElementsByTagName('div');
var links=[];

for (var i=0;i<os.length;i++){
    var o=os[i];
    if (o.className=='category-static-links') {
        var as=o.getElementsByTagName('a');
        for (var j=0;j<as.length;j++) links.push(as[j].innerHTML);
        break;
    }

}
Schien
  • 3,855
  • 1
  • 16
  • 29
  • Why don't you use the `querySelector` or `querySelectorAll` method instead of that expensive/fragile/buggy way of filtering elements? Also how does pushing those `a` elements into an array answer the question? – Ram Jan 18 '15 at 01:50
  • This is actually what happens under the hood. The code is more reliable than jQuery. The above code runs on IE5; your jQuery code won't even load. The OP asks to parse the data into a list. If the "list" is an array, as opposed to an unordered list, then an array would suffice. I'm not pushing the "a" elements, but the innerHTML, i.e. the CONTENT of the element. He can use this array to rebuild the list if he wants. – Schien Jan 18 '15 at 01:52
  • Actually the question is very unclear, perhaps OP can use this code for achieving his goal. I didn't post an answer! IE5? Seriously? Saying jQuery is not reliable doesn't make a lot of sense. I also love vanilla JavaScript but jQuery **is** reliable, at least when it comes to selecting the target elements. – Ram Jan 18 '15 at 02:02
  • Well, let's not start a flaming war here. I know you had good intention and that we both wanted to help out. My point is that the JavaScript code is not LESS reliable than jQuery. What puzzles me is that why people make their lives harder by not assigning an ID to the element? – Schien Jan 18 '15 at 02:04
  • 1
    I agree. I tried to imply this in my last comment. Yes, jQuery is a JavaScript library, and well-written JavaScript code is reliable. Adding IDs to each DOM element is very tricky and most of the time is not necessary. `document.querySelector('.category-static-links')` here returns the target element. It also works in IE8 :) – Ram Jan 18 '15 at 02:17