如何刪除文本（不刪除內部元素）的使用jQuery

想象一下，我有類似如下（從http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/修改）如何刪除文本（不刪除內部元素）的使用jQuery

<div id="foo"> 
    first 
    <div id="bar1"> 
     jumps over a lazy dog! 
    </div> 
    second 
    <div id="bar2"> 
     another jumps over a lazy dog! 
    </div> 
    third 
</div>

如何刪除剛（純文本）「首先從父元素「，」第二「和」第三「，而不影響任何子元素。

來源

2012-07-24 user203687

http://stackoverflow.com/questions/2715167/jquery-how-to-remove-the-text-but-not-the-children -elements or http://stackoverflow.com/questions/3442394/jquery-using-text-to-retrieve-only-text-not-nested-in-child-tags – kannix 2012-07-24 14:59:43

它在這裏回答http：// stackoverflow.com/questions/6388507/use-jquery-to-select-text-not-in-an-element – fan711 2012-07-24 15:02:57

答案在所有鏈接的問題中都是完全錯誤的，導致諸如丟失的事件處理程序之類的不希望的問題，或者在某些瀏覽器中中斷（例如，使用'nodeType'常量）。 – 2012-07-24 15:27:04

如果你想刪除所有你可以用.contents()子文本節點，然後.filter()到匹配的集合減少到只有文本節點：

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

這是working example。

注意：這樣會保留在子元素中，回答使用.html()不會做（因爲元素從DOM中刪除並添加回）任何現有的事件處理程序。

注2：答案中的一些鏈接的問題表現出類似的代碼，在我的答案在這裏，但他們使用的nodeType常數（例如return this.nodeType === Node.TEXT_NODE）。這是不好的做法，因爲低於版本9的IE不執行Node屬性。使用整數更安全（可在DOM level 2 spec中找到）。

來源

2012-07-24 15:01:35

可怕的'.html'解決方案在這種情況下不會刪除處理程序（或者他們這樣做？），但這只是偶然，因爲'.html'也可以插入節點（雖然沒有記錄）。編輯：確定他們肯定會刪除處理程序，因爲'.html'中的隱含'.empty（）' – Esailija 2012-07-24 15:07:09

@Esailija - 使用mgraph答案中的代碼似乎刪除事件處理程序：http://jsfiddle.net/jamesallardice/ PXxC4/1/ – 2012-07-24 15:08:43

是啊，你是對的，愚蠢的腦屁：P – Esailija 2012-07-24 15:10:39

試試這個：

$("#foo").html($("#foo").find("div"));

演示：http://jsfiddle.net/PXxC4/

來源

2012-07-24 15:00:55 mgraph

你可以使用它。

$("#foo").html($("#foo").children());

來源

2012-07-24 15:03:10 xdazz

這是唯一爲我工作的人。 – zorrotmm 2017-03-14 19:28:43

下面是一個非jQuery版本，它可以在所有主流瀏覽器中運行回到IE 5，只是爲了演示沒有jQuery的生活是多麼的無知。

演示：http://jsfiddle.net/timdown/aHW9J/

代碼：

var el = document.getElementById("foo"), child = el.firstChild, nextChild; 

while (child) { 
    nextChild = child.nextSibling; 
    if (child.nodeType == 3) { 
     el.removeChild(child); 
    } 
    child = nextChild; 
}

來源

2012-07-24 15:34:50

好吧，只是嚇到我了;） – 2012-07-24 15:37:50

@JamieHutber：別擔心，一切都會好的。 – 2012-07-24 15:40:10

perrrr perr – 2012-07-24 15:41:03

如何刪除文本（不刪除內部元素）的使用jQuery

回答

相關問題