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

up vote
2
down vote

favorite

1

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.…</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…</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?

javascript node.js cheerio

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

add a comment | 

up vote
2
down vote

favorite

1

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.…</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…</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?

javascript node.js cheerio

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

add a comment | 

up vote
2
down vote

favorite

1

up vote
2
down vote

favorite

1

1

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.…</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…</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?

javascript node.js cheerio

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

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.…</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…</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?

javascript node.js cheerio

javascript node.js cheerio

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

share|improve this question

share|improve this question

asked 2 days ago

Harsh Patel

1,51811128

asked 2 days ago

Harsh Patel

1,51811128

asked 2 days ago

Harsh Patel

1,51811128

1,51811128

add a comment | 

add a comment | 

3 Answers
3

active

oldest

votes

up vote
1
down vote

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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

share|improve this answer

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Solved..Thank you.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Thanks for the comment.. I have added improvement to the solution ;)
  – Yosvel Quintero
  2 days ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

share|improve this answer

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Nice, Thank You for the help.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, you are most welcome:)
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  In output it only print fresh but it should print fresh mint. can you please check this?
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, PLZ give me few minutes....
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Sure. take your time.
  – Harsh Patel
  2 days ago
  

  
  
  
  

 | 
show 3 more comments

up vote
0
down vote

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.…</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…</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()); 

});

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373096%2fexclude-span-tag-content-and-get-only-li-and-a-tag-content%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote

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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

share|improve this answer

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Solved..Thank you.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Thanks for the comment.. I have added improvement to the solution ;)
  – Yosvel Quintero
  2 days ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

share|improve this answer

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Solved..Thank you.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Thanks for the comment.. I have added improvement to the solution ;)
  – Yosvel Quintero
  2 days ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

up vote
1
down vote

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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

share|improve this answer

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

$('.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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

$('.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.…</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…</p>

      </article>

      </span>

    </li>

    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

    </ul>

  </div>

</div>

share|improve this answer

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

share|improve this answer

share|improve this answer

edited 2 days ago

edited 2 days ago

edited 2 days ago

answered 2 days ago

Yosvel Quintero

10.7k42229

answered 2 days ago

Yosvel Quintero

10.7k42229

answered 2 days ago

Yosvel Quintero

10.7k42229

10.7k42229

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Solved..Thank you.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Thanks for the comment.. I have added improvement to the solution ;)
  – Yosvel Quintero
  2 days ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Solved..Thank you.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Thanks for the comment.. I have added improvement to the solution ;)
  – Yosvel Quintero
  2 days ago
  

  
  
  
  

Solved..Thank you.
– Harsh Patel
2 days ago

Solved..Thank you.
– Harsh Patel
2 days ago

1

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
2 days ago

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
2 days ago

add a comment | 

up vote
1
down vote

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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

share|improve this answer

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Nice, Thank You for the help.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, you are most welcome:)
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  In output it only print fresh but it should print fresh mint. can you please check this?
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, PLZ give me few minutes....
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Sure. take your time.
  – Harsh Patel
  2 days ago
  

  
  
  
  

 | 
show 3 more comments

up vote
1
down vote

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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

share|improve this answer

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Nice, Thank You for the help.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, you are most welcome:)
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  In output it only print fresh but it should print fresh mint. can you please check this?
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, PLZ give me few minutes....
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Sure. take your time.
  – Harsh Patel
  2 days ago
  

  
  
  
  

 | 
show 3 more comments

up vote
1
down vote

up vote
1
down vote

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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

share|improve this answer

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

$('.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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

$('.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.…</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…</p>

              </article>

           </span>

        </li>

        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>

     </ul>

share|improve this answer

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

share|improve this answer

share|improve this answer

edited 2 days ago

edited 2 days ago

edited 2 days ago

answered 2 days ago

Mamun

22.4k71428

answered 2 days ago

Mamun

22.4k71428

answered 2 days ago

Mamun

22.4k71428

22.4k71428

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Nice, Thank You for the help.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, you are most welcome:)
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  In output it only print fresh but it should print fresh mint. can you please check this?
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, PLZ give me few minutes....
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Sure. take your time.
  – Harsh Patel
  2 days ago
  

  
  
  
  

 | 
show 3 more comments

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Nice, Thank You for the help.
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, you are most welcome:)
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  In output it only print fresh but it should print fresh mint. can you please check this?
  – Harsh Patel
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @HarshPatel, PLZ give me few minutes....
  – Mamun
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Sure. take your time.
  – Harsh Patel
  2 days ago
  

  
  
  
  

1

1

Nice, Thank You for the help.
– Harsh Patel
2 days ago

Nice, Thank You for the help.
– Harsh Patel
2 days ago

1

1

@HarshPatel, you are most welcome:)
– Mamun
2 days ago

@HarshPatel, you are most welcome:)
– Mamun
2 days ago

1

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
2 days ago

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
2 days ago

1

1

@HarshPatel, PLZ give me few minutes....
– Mamun
2 days ago

@HarshPatel, PLZ give me few minutes....
– Mamun
2 days ago

1

1

Sure. take your time.
– Harsh Patel
2 days ago

Sure. take your time.
– Harsh Patel
2 days ago

 | 
show 3 more comments

up vote
0
down vote

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.…</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…</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()); 

});

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

add a comment | 

up vote
0
down vote

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.…</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…</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()); 

});

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

add a comment | 

up vote
0
down vote

up vote
0
down vote

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.…</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…</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()); 

});

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

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.…</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…</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()); 

});

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

share|improve this answer

share|improve this answer

answered 2 days ago

Raghav Rangani

569210

answered 2 days ago

Raghav Rangani

569210

answered 2 days ago

Raghav Rangani

569210

569210

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373096%2fexclude-span-tag-content-and-get-only-li-and-a-tag-content%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here