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>

您可以在span id“sc_start_commenttext-330”和span id“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

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

编辑：这是一种用于删除文本节点的替代for循环方法

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

Answer 2

一种方法是替换其祖先之一的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 3

这是一种不同的方法;

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

您可以在行动here

中看到它

Answer 4

您可以使用以下代码执行此操作：

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

这取决于你想做什么...... 尝试这样的事情：

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

使用jQuery删除文本和标签

6 个答案: