CODEWITHSUNDEEP
javascript
cremaster
cremaster

Reputation: 50

Using Javascript to replace part of a <li> string removes <a> and <span> tags. How can I remove the text but not the tags?

I am using Zendesk Help Center but customizing it with JS so apologies if that makes this more difficult.

I have many (~2000) articles which begin with "KCS - " (for instance, KCS - How to Issue a Bill). I now want to remove that "KCS - " from all of the article titles. I successfully used the following code to remove the "KCS - " from those titles:

$('h1').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ', ''));

This works for the articles themselves, but the "KCS - " still appears in search results. I tried the following code to deal with that:

$('li').addClass('search-result').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ',''));

This does remove the "KCS - " but it also removed and tags and results in plain text instead of links appearing in the search results.

I've attached screenshots of the search result code before and after trying to remove the "KCS - ". If anyone has an idea of how I can remove the "KCS - " from the search results without breaking the rest of the code, I would be very grateful. Thanks for your time and thoughts.

Edit: I've posted the browser output as opposed to using screenshots.

Pre-Removal:

` KCS - Documents: Adding New Files and Folders

          <span class="search-result-votes">-1</span>

        <div class="search-result-meta">by <a target="_zendesk_lotus" href="/access/return_to?return_to=https://clio1440180657.zendesk.com/agent/users/1229273507/tickets">Name Changed</a> <time datetime="2015-08-26T15:51:48Z" title="2015-08-26 07:51" data-datetime="relative">2 years ago</time> in <a href="https://clio1440180657.zendesk.com/hc/en-us/categories/200678747-Working-with-Clio-Documents">Working with Clovis Documents</a> &gt; <a href="https://clio1440180657.zendesk.com/hc/en-us/sections/201499348-Working-with-Clio-Documents">Working with Clovis Documents</a></div>
        <div class="search-result-description">Creating a <em>New</em> Folder &nbsp; You can add a standalone folder from the "All <em>Files</em>" list or from within any other <em>document</em>...</div>
      </li> `

Post-Removal

` Documents: Adding New Files and Folders

          -1

        by *name changed* 2 years ago in Working with Clovis Documents &gt; Working with Clovis Documents
        Creating a New Folder &nbsp; You can add a standalone folder from the "All Files" list or from within any other document...
      </li>
       `

Upvotes: 2

Views: 75

Answers (1)

Josh Palmeri
Josh Palmeri

Reputation: 159

You are using the text() function on the entire HTML element, which destroys your html tags and converts the entire <div> to a string value.

Instead, target the <a> element inside the <li> like so:

$('li').addClass('search-result').find('a:first-child').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ','')); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
</ul>

Note: If you are confident that the <a>element (the link) is always the first child of the <li>, I suggest keeping this as-is, using the :first-child pseudo class.

Upvotes: 1

Related Questions