Question

说我有这样：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span></span>sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

是否可以在之后删除/删除文字？

结果将是：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>

Answer 1

您正在寻找类似的内容：http://jsfiddle.net/zc464way/

$('p').each( function( index, element ) {
    var content = $(element).html();
    $(element).html( content.substring(0, content.indexOf('<span') - 1 ) );
} );

如果你只需要生成一个元素，你也可以稍微减少一点，如下所示：

var content = $('p').html();
$('p').html( content.substring(0, content.indexOf('<span') - 1 ) );

但第一个示例允许您一次截断多个段落元素。

注意：我搜索'<span'而不是''只是为了允许更多的灵活性，以防您要截断任何span元素上的文本;但是，您可以通过搜索''而将其更改为仅截断空的span元素。

Answer 2

您可以在范围上拆分段落html的内容并返回第一个匹配。

$('p').replaceWith(function () {
    return $('p').html().split('<span></span>')[0]
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span></span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

Answer 3

您可以获取span元素并继续迭代nextSibling以获取其以下的兄弟节点。然后，检查这些节点的类型是否为3（即文本节点），并将其删除。

$('p').each(function(index, element) {
    var span = $(element).children('span').get(0);
    if(!span) return;
    var node, next = span.nextSibling;
    while(node = next) {
        next = node.nextSibling;
        if(node.nodeType == 3) element.removeChild(node);
    }
});

$('p').each( function(index, element) {
    var span = $(element).children('span').get(0),
        node, next = span.nextSibling;
    while(node = next) {
        next = node.nextSibling;
        if(node.nodeType == 3) element.removeChild(node);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  <span></span>
  sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.
</p>

从<p> <span> </span> </p>中删除文本

3 个答案: