Удалить текст и теги с помощью jQuery

Question

Звучит просто, но это действительно работает: я хочу удалить ВСЕ Контент (текст и теги) между двумя тегами span:

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

Все, что вы можете найти между идентификатором промежутка "sc_start_commenttext-330" и идентификатором промежутка "sc_end_commenttext-330", должно быть удалено следующим образом:

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

Я просто пробую это с этим Кодексом, но это работает:

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

Код генерируется CMS, поэтому невозможно изменить HTML.

Некоторые идеи? Большое спасибо!

Answer 1

Это зависит от того, что вы пытаетесь сделать... Попробуйте что-то вроде этого:

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

Как видите, вы можете контролировать, какие элементы вы хотите сохранить (span,div)... и затем удалить все остальные. Надеюсь, поможет:-)

Answer 2

Следующий 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();
    }
});

результаты в…

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

редактировать: вот альтернативный подход цикла для удаления текстовых узлов

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

Answer 3

Вы можете сделать это с помощью этого кода:

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

Смотрите это работает здесь: http://jsfiddle.net/44aLQ/1/

Answer 4

Одним из способов может быть замена содержимого HTML одного из его предков. Здесь вы можете подняться к бабушке и дедушке, но вы можете адаптироваться. Таким образом, я предлагаю что-то подобное:

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

Answer 5

Здесь другой подход;

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

Вы можете увидеть это в действии здесь

Answer 6

Использование

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