Remove text with jQuery

Question

Is there a way to remove text that is not wrapped in any tag using jQuery

This is some text

This is \"unwrapped\" text //to be removed

&         


        

Answer 1

Wrapping it in a DOM element would mean jQuery can find it:

eg:

var text = 'This is "unwrapped" text';

$("div:contains('" + text + "')").remove();

or just:

$('p').next().remove();

Answer 2

fwiw..

<div class="parent-element">
<p>This is some text</p>
This is "unwrapped" text //to be removed
<span>some more text</span>
</div>

via CSS:

.parent-element { font-size: 0px; }
.parent-element p { font-size: 12px; }
.parent-element span { font-size: 14px; }

Answer 3

Using the answer from this question:

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

Answer 4

First, you can wrap them with dummy spans:

$("body").contents()
    .filter(function(){ return this.nodeType != 1; })
    .wrap("<span class='orphan'/>");

Now you can remove them easily:

$('span.orphan').remove();

Answer 5

It's amazing but at the same time the following code doesn't work

$("div.myClass:has(img)").contents().filter(":text").remove();

and the code from the first post works

$("div.myClass:has(img)")
  .contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

It's important to remeber! jQuery 1.8.3.

And first of all I remember that innerHTML manipulation works much more faster than this approach!