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

up vote
2
down vote

favorite

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?

asked Nov 19 at 10:54

Harsh Patel

1,52911128

add a comment |

up vote
2
down vote

favorite

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?

asked Nov 19 at 10:54

Harsh Patel

1,52911128

add a comment |

up vote
2
down vote

favorite

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?

asked Nov 19 at 10:54

Harsh Patel

1,52911128

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

asked Nov 19 at 10:54

Harsh Patel

1,52911128

asked Nov 19 at 10:54

Harsh Patel

1,52911128

asked Nov 19 at 10:54

Harsh Patel

1,52911128

asked Nov 19 at 10:54

Harsh Patel

1,52911128

asked Nov 19 at 10:54

Harsh Patel

1,52911128

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>

edited Nov 19 at 11:15

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

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>

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

1

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

1

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

1

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

1

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

|
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()); 

});

answered Nov 19 at 11:06

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');
});

Post as a guest

Name

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

Required, but never shown

3 Answers
3

active

oldest

votes

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>

edited Nov 19 at 11:15

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

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>

edited Nov 19 at 11:15

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

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>

edited Nov 19 at 11:15

answered Nov 19 at 11:01

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>

edited Nov 19 at 11:15

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

edited Nov 19 at 11:15

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

answered Nov 19 at 11:01

Yosvel Quintero

10.7k42229

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

add a comment |

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

1

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

Solved..Thank you.
– Harsh Patel
Nov 19 at 11:04

Thanks for the comment.. I have added improvement to the solution ;)
– Yosvel Quintero
Nov 19 at 11:24

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>

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

1

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

1

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

1

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

1

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

|
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>

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

1

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

1

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

1

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

1

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

|
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>

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

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>

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

edited Nov 19 at 11:50

answered Nov 19 at 11:04

Mamun

22.5k71428

answered Nov 19 at 11:04

Mamun

22.5k71428

answered Nov 19 at 11:04

Mamun

22.5k71428

1

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

1

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

1

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

1

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

|
show 3 more comments

1

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

1

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

1

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

1

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

1

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

Nice, Thank You for the help.
– Harsh Patel
Nov 19 at 11:06

@HarshPatel, you are most welcome:)
– Mamun
Nov 19 at 11:06

In output it only print fresh but it should print fresh mint. can you please check this?
– Harsh Patel
Nov 19 at 11:18

@HarshPatel, PLZ give me few minutes....
– Mamun
Nov 19 at 11:27

Sure. take your time.
– Harsh Patel
Nov 19 at 11:35

|
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()); 

});

answered Nov 19 at 11:06

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()); 

});

answered Nov 19 at 11:06

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()); 

});

answered Nov 19 at 11:06

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()); 

});

answered Nov 19 at 11:06

Raghav Rangani

569210

answered Nov 19 at 11:06

Raghav Rangani

569210

answered Nov 19 at 11:06

Raghav Rangani

569210

answered Nov 19 at 11:06

Raghav Rangani

569210

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

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

搜尋此網誌

Ytukyg