Best way to replace/remove text from a string inside an li tag

Question

I'm working on a sitemap list in ExpressionEngine (so I don't have too much flexibility on how things are rendered) and I need to remove the word 'Parent' from a string if it exists.

Below is an example of HTML output:

<li class="sitemap-item">
  <a href="">About Us Parent</a>

  <ul>
    <li class="sitemap-item">
      <a href="">About Us</a>

      <ul>
        <li class="sitemap-item">
          <a href="http://website.dev/about-us/meet-the-directors">Meet the Directors</a>

        </li>

        <li class="sitemap-item">
          <a href="">Partners</a>

        </li>

        <li class="sitemap-item">
          <a href="">Accreditation &amp; Awards</a>

        </li>

        <li class="sitemap-item">
          <a href="">Testimonials</a>

        </li>

        <li class="sitemap-item">
          <a href="http://website.dev/careers">Careers</a>

        </li>

      </ul>
    </li>

  </ul>
</li>

I tried the following jQuery with no luck, just doesn't replace the word at all:

$(document).ready(function(){
    if($('li:contains("Parent")')){
    $(this).replace('Parent','');
  };
});

As you can see I'm trying to do this with jQuery. Can anyone shed some light on the correct way to do this?

So you expect to get an `About Us` nested inside an other `About Us`??? — A. Wolff, Apr 18 '16 at 12:40
Sorry for the late reply, lunch break! haha. Yes that's right as a parent category can have many sub categories — Andy Holmes, Apr 18 '16 at 14:03

adeneo · Accepted Answer · 2016-04-18T12:46:35.753

4

jQuery doesn't have a replace method, it's a native method for strings, meaning you have to get the text first as a string, for instance with text(), and then return the changed string back again

$(document).ready(function(){
    $('li > a:contains("Parent")').text(function(_, txt) {
        return txt.replace('Parent','');
    });
});

edited Apr 18 '16 at 12:46

answered Apr 18 '16 at 12:39

adeneo

312,895
29
395
388

But you are completly destroying HTML markup this way. Selector should be in this case: `'li > a:contains("Parent")'` – A. Wolff Apr 18 '16 at 12:43
@A.Wolff - that's true, the entire markup in the LI would be replaced by the text, edited it. – adeneo Apr 18 '16 at 12:46

score 0 · Answer 2 · answered Apr 18 '16 at 12:45

0

You can use the replace() method with a regex to make sure you replace all instances of the word. replace() with strings only replaces the first occurance.

$(document).ready(function(){
  var elements = $('li');
  elements.html(elements.html().replace(/Parent/gi, ''));
});

answered Apr 18 '16 at 12:45

DunningKrugerEffect

603
1
5
18

The downside is that you could unbind any previous events/datas bound to these LI elements – A. Wolff Apr 18 '16 at 12:46
That's true. Ideally he would use a selector closer to `$('li.sitemap-item > a')`. – DunningKrugerEffect Apr 18 '16 at 12:47

Best way to replace/remove text from a string inside an li tag

2 Answers2

Linked