Question

I have a list of posts and I’d like to remove all text/HTML content except the content set “strong”.

Original

<li id="post">
    <p>
        <strong>Reality</strong>
    </p>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Buzz</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Innovation</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li> 

Desired Result

<li id="post">
        Reality
</li>
<li id="post">
        Buzz
</li>
<li id="post">
        Innovation
</li>

How can I do this using JQuery?

Answer 1

My solution will be to make a selector that selects all strong $(“strong”) then remove all li’s and then .each item in $(“strong”), append it inside a new li.

---

Update:

You can try this: http://jsfiddle.net/6awfe/

$("li#post").each( function()
    {
        $(this).html("[strong start tag]" + $("strong", this).html()+"[strong end tag]");
    } )