Remove Text and Tags with jQuery

Question

Sounds easy, but it doest work: I want to remove ALL Content (text and tags) between two span tags:

<div class="comment-body" id="comment-body-parent-330">
<p><span id="sc_start_commenttext-330"></span>
Some Text<br>
Some Text<br>
Some Text</p>
<p>Some Text<span id="sc_end_commenttext-330"></span>
</p>
Some Text and Code
</div>

Everything you can find between span id "sc_start_commenttext-330" and span id "sc_end_commenttext-330" should be removed, like that:

    <p><span id="sc_start_commenttext-330"></span>
<span id="sc_end_commenttext-330"></span>
    </p>

I just try it with that Code, but it doenst work:

    jQuery("#sc_start_commenttext-330").
nextUntil("#sc_end_commenttext-330").
remove();

The code is generated by a CMS, so its not possivle to change the HTML.

Some ideas? Thanks a lot!

Vargo

Your <span> tags are not on the same level. So what should happen if there is text after the second tag, but still contained inside the <p> element that contains the <span>? – Sartorial

yeah i know, thats shit code made by the cms...but i have to find a solution for this :-/ – Vargo

So what should happen to any text inside the <p> element but after the second <span>? Should it be kept, or deleted? Just checking :-) – Sartorial

After the second span tag and before the ending p will be no text. – Vargo

Answer 1

It depends on what you trying to do... Try something like this:

// for every "p" element
$("p").each(
  function () {
     // temprary save the children elements like spans & divs
     $temp = $(this).children("span,div");
     // clean the "p" container (text + <br>)
     $(this).empty();
     // recive the children
     $(this).append($temp);
   }
);

As you see you can control wich elements you want to keep (span,div)... and than remove all the rest. Hope it helps :-)

Tandie

All this will do is wipe the contents of all <p> elements in the page, irrespective of where they are and whether they are between the comment markers. See here: jsfiddle.net/H7H8k/1 – Sartorial

Answer 2

The following jQuery…

//Removing all non span elements
$('p').children().not('span').remove();​

//Removing text nodes
var forEach = [].forEach;
forEach.call($('p').contents(), function(node){
    if (node.nodeType === 3) {
      $(node).remove();
    }
});

results in…

<p><span id="sc_start_commenttext-330"></span></p>
<p><span id="sc_end_commenttext-330"></span></p>

edit: here is an alternative for-loop approach for removing the text nodes

//Removing text nodes
for (var i = 0, allNodes = $('p').contents(); i < allNodes.length; i++) {
    if (allNodes[i].nodeType === 3) {
      $(allNodes[i]).remove();
    }
}

Mosley

Thank u - but i dont know how to define the jquery selector in my context. so i just updated my html - would be nice if you udpate your code too! thanks :-) – Vargo

Answer 3

One way can be to replace the html content of one of its ancestor. Here you can go up to the grandparent, but you can adapt. I thus propose something like that :

var $parent = $("#sc_start_commenttext-330").parent().parent(),
    parentContent = $parent.html();

parentContent = parentContent.replace(/(<span id="sc_start_commenttext-330".*<\/span>)((.|\s)*)(<span id="sc_end_commenttext-330".*<\/span>)/, "$1$4");
$parent.html(parentContent);

Milled

are you sure that this is the right expression: parentContent = parentContent.replace(/(<span id="sc_start_commenttext-330".*<\/span>)((.|\s)*)(<span id="sc_end_commenttext-330".*<\/span>)/, "$1$4"); it doesnt replace anything... – Vargo

Hm, where is the mistake: jsfiddle.net/4KahH the alert is before replacing and after to check – Vargo

Answer 4

Here is a different approach;

var $comment_body = $('.comment-body'), // cache the <div> for future uses
    html = $comment_body.html(), // get the HTML
    // find the first </span>
    start_pos = html.indexOf('</span>', html.indexOf('<span id="sc_start_')) + '</span>'.length, // You can use 7 instead of '</span>'.length, I used it for clarity
    // find the next sc_end_
    end_pos = html.indexOf('<span id="sc_end_', start_pos);
$comment_body.html(
    // replace the unwanted parts
    html.replace(
        html.substring(0, end_pos).substring(start_pos), // unwanted parts
        ''
    )
);

You can see it in action here

Length

Answer 5

You can do it with this code:

// Find the start <span> and its container <p>
var $startSpan = $('#sc_start_commenttext-330');
var $startP = $startSpan.parent();

// Find the end <span> and its container <p>
var $stopSpan = $('#sc_end_commenttext-330');
var $stopP = $stopSpan.parent();

// Clear the contents of the <span> elements and move them
//   to a temporary location at the end of the document
$startSpan.html('').appendTo($('body'));
$startSpan.html('').appendTo($('body'));

// Delete anything between the two paragraphs
$startP.nextUntil($stopP).remove();

// Clear the contents of the start and end paragraphs
//   and re-insert the <span> elements
$startP.html('').append($startSpan);
$stopP.html('').append($stopSpan);

See it working here: http://jsfiddle.net/44aLQ/1/

Sartorial

Answer 6

use

$(function() {
	$('span').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><a href="#" id="doClean">Click here to clear comments</a></p>
<p>Text before....</p>
<p><span id="sc_start_commenttext-330">alma</span> Some Text<br> Some Text<br> Some Text</p>
<p>Random paragraph in the middle</p>
<p>Some Text<span id="sc_end_commenttext-330">mahbub</span></p>
<p>Text after...</p>

Qualifier