exclude span tag content and get only li and a tag content

remove element onclick javascript
javascript remove element by class
jquery remove element by id
html tags
jquery remove child element from parent
jquery remove text
removechild
html elements and attributes

Here is my code :

HTML:-

<div class="ingredients-list">
    <div class="ingredients-list__content">
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>
  </div>
</div>

What I tried:

$('.ingredients-list li', html).each(function(i, elm) {
    console.log($(this).text()) // for testing do text() 
}); 

Current O/P

1 head Baby Gem lettuce
cucumber
fresh mint Mint mi-ntThere are several types of mint, each with its own subtle difference in flavour and appearance.… 
1 tbsp fresh lemon juice
100g can tuna in brine Tuna tune-ahA member of the mackerel family, tuna are mainly found in the world's warmer oceans. They… 
2 mini pitta breads

Expected O/P

1 head Baby Gem lettuce
cucumber
fresh mint 
1 tbsp fresh lemon juice
100g can tuna in brine
2 mini pitta breads

How can I traverse through li but remove span tag content that is inside some li tag?

You can check the nodeType property to return only the text from each li element:

$('.ingredients-list li').each(function(i, elm) {
  var text = $(this).contents().filter(function() {
    return this.nodeType == 3 || $(this).is('a'); // text node or anchor
  }).text().trim();
  console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
    <div class="ingredients-list__content">
	<ul>
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>

Smashing WordPress: Beyond the Blog, So how would you make this work with wp_page_menu(), the template tag for proper Easy, just add the necessary span HTML with the help of the link_before and (in this case the li and a tags) and then adds an opening and closing span tag make sure that the wp_list_categories() tag doesn't output the content (that's  The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

No need to iterage over all the '.ingredients-list li' elements..

You can use $('.ingredients-list li').find('span').remove(); to remove all the span elements.

Code:

$('.ingredients-list li').find('span').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
  <div class="ingredients-list__content">
    <li>1 head Baby Gem lettuce</li>
    <li>cucumber</li>
    <li>
      fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
      <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
      <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
      </article>
      </span>
    </li>

    <li>1 tbsp fresh lemon juice</li>
    <li>
      100g can <a href="/glossary/tuna">tuna</a> in brine
      <span>
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
      <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
      </article>
      </span>
    </li>
    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
    </ul>
  </div>
</div>

jQuery Remove Elements, To remove elements and content, there are mainly two jQuery methods: remove() - Removes the selected element (and its child elements); empty() - Removes  I did an around the entire thing and it came back not valid in the browser. It should be valid if you are using html5, in earlier versions the <a> element may only contain in-line elements. It

var html = '<div class="ingredients-list">
        <div class="ingredients-list__content">
            <li >1 head Baby Gem lettuce</li>
            <li>cucumber</li>
            <li>
               fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
               <span class="ingredients-list__glossary-element" id="ingredients-glossary">
                  <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                     <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                     <span class="fonetic text-style-alt">mi-nt</span>
                     <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
                  </article>
               </span>
            </li>

            <li>1 tbsp fresh lemon juice</li>
            <li>
               100g can <a href="/glossary/tuna">tuna</a> in brine
               <span >
                  <article>
                     <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                     <span class="fonetic text-style-alt">tune-ah</span>
                     <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
                  </article>
               </span>
            </li>
            <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
         </ul>
      </div>
    </div>';

var div = $("<div>"); 
div.html(html);

div.find('.ingredients-list li').each(function(i, elm) {
  $(this).find('span').remove(); 
  console.log($(this).text().trim()); 
});

Beginner's Step-by-Step Coding Course, 9.1 CREATE AN HTMLFILE Start by creating a new HTML file, just as you did in step 1.2 of Replace the text in the <title> tag with some asterisks (*) and remove the the template to make a new page <script src="scripts/app.js"></​script>Delete this Remove the “active” class from the <li class=”nav-item”> and the “<span  You want to make sure to target the span tag that is inside the class "intro" - the span tag is a child element of the "p" element with class "intro". So in order to specify it is a child of the "intro" class, you would do as follows:

<nav>: The Navigation Section element, The HTML nav element represents a section of a page whose purpose is to provide <li class="crumb">Jump Bike 3000</li>. 6 A document may have several <nav> elements, for example, one for site navigation and element to determine whether to omit the initial rendering of navigation-only content. Hi Guys I have one scenario where i have to put colour on columns values ,so i use span tag in sql query.when i download that report in html its fine.But when i download it in CSV the span tag comes with the column value. how to avoid it.i want no span tag in CSV. Edited by: Robertson das on Sep 29, 2011 12:54 AM

removeChild() Only Removing One li element - JavaScript, When the span tags are clicked, the X text should go away. By running the code I have, it is only removing the first span only, not the other two. The <span> tag does not have any default meaning or rendering. The <span> tag can be useful for the following task: To change the language of a part of the text. To change the color, font, background of a part of text using CSS. To apply the scripts to the particular part of the text.

HTML element, An HTML element is a type of HTML (Hypertext Markup Language) document component, one Elements can also have content, including other elements and text. The contents of the element must be placed between just after the start tag (which Lists with <ul><li> are %block; elements and are presented as block  I am building a child theme for my personal use. Not very familiar with php, can only do basic things based on logic. I need to exclude one tag from being displayed on the tag list on a single post.

Comments
  • Nice, Thank You for the help.
  • @HarshPatel, you are most welcome:)
  • In output it only print fresh but it should print fresh mint. can you please check this?
  • Sure. take your time.
  • @HarshPatel, you have to add another condition ($(this).is('a')) to leave the anchor element .....updated the answer...please check.....thanks.
  • Solved..Thank you.
  • Thanks for the comment.. I have added improvement to the solution ;)