Question

我有类似的东西。

<div id="firstDiv">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</div>

我想删除'这是一些文字'并且需要完整的html元素。

我尝试使用像

这样的东西

$("#firstDiv")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text("");

但它不起作用。

是否有办法获取（并可能通过.text(""))之类的内容删除标记中的自由文本，而不是其子标记中的文本？

非常感谢。

Answer 1

过滤掉文本节点并将其删除：

$('#firstDiv').contents().filter(function() {
    return this.nodeType===3;
}).remove();

FIDDLE

要过滤文本本身，您可以：

$('#firstDiv').contents().filter(function() {
    return this.nodeType === 3 && this.nodeValue.trim() === 'This is some text';
}).remove();

并获取文字：

var txt = [];

$('#firstDiv').contents().filter(function() {
    if ( this.nodeType === 3 ) txt.push(this.nodeValue);
    return this.nodeType === 3;
}).remove();

Answer 2

查看此fiddle

假设你有这个HTML

<parent>
  <child>i want to keep the child</child>
  Some text I want to remove
  <child>i want to keep the child</child>
  <child>i want to keep the child</child>
</parent>

然后你可以删除父的内部文本：

var child = $('parent').children('child');
$('parent').html(child);

检查此fiddle以获取html的解决方案

var child = $('#firstDiv').children('span');
$('#firstDiv').html(child);

PS：请注意，当您删除然后重新创建元素时，任何绑定在该div上的事件处理程序都将丢失

Answer 3

为什么在使用vanilla JS更简单时尝试强制执行jQuery：

var div = document.getElementById('firstDiv'),
    i,
    el;

for (i = 0; i< div.childNodes.length; i++) {
    el = div.childNodes[i];
    if (el.nodeType === 3) {
        div.removeChild(el);
    }
}

在这里小提琴：http://jsfiddle.net/YPKGQ/

Answer 4

检查一下，不确定它是否符合您的要求......注意：我只在Chrome中测试过它

http://jsfiddle.net/LgyJ8/

cleartext($('#firstDiv'));

function cleartext(node) {

    var children = $(node).children();
    if(children.length > 0) {

        var newhtml = "";
        children.each(function() {

            cleartext($(this));

            newhtml += $('<div/>').append(this).html();

        });

        $(node).html(newhtml);

    }
}

Jquery删除innertext但保留html

4 个答案: