5

听起来很简单，但它不起作用：我想删除两个跨度标签之间的所有内容（文本和标签）：

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

一些想法？非常感谢！

4

6 回答 6

3

The following jQuery…</p> 

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

<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();
    }
}
于 2012-12-06T10:24:18.697 回答
1

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

于 2012-12-06T10:36:46.663 回答
1

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

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

于 2012-12-06T10:38:50.113 回答
1

一种方法是替换其祖先之一的 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);
于 2012-12-06T10:15:19.640 回答
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);
   }
);

如您所见，您可以控制要保留的元素（跨度，div）...而不是删除所有其余元素。希望能帮助到你 ：-）

于 2012-12-06T10:56:24.740 回答
0

利用

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

于 2015-12-15T07:33:19.307 回答