Question

How do I turn this:

<a class="link">
   <p class="paragraph">This is some text</p>
   <p class="paragraph">This is some more text</p>
   <p class="paragraph">And some more</p>
</a>

into this:

<a class="link">
   This is some text This is some more text And some more
</a>

with jQuery. I tried using append and merge but I just can’t figure it out.

Answer 1

Since the text method returns the text content of an element and it’s descendants, you can just use that:

var link = $("a.link");
link.text(link.text());​​​​​​​​​

From the docs:

Get the combined text contents of each element in the set of matched
elements, including their descendants.

Here’s a working example.

Update (see comments)

In the case that this needs to apply to multiple .link elements, you can use each:

$("a.link").each(function() {
    $(this).text($(this).text()); 
});