无法删除 DOM 中没有元素或标签的文本

Question

我现在正忙于这件事一段时间，但我无法解决它。我已经检查了这一页上的所有答案，但我仍然无法使其发挥作用。文本保留在页面上。

使用.text((只检索未嵌套在子标记中的文本

我的HTML:

<div class="parent">
<div class="child1">
<div class="child-of-child1">
A lot of elements here
</div> -----> (closing child of child 1)
TEXT I LIKE TO REMOVE
</div> -----> (closing child 1)
</div>

我所尝试的就是这个话题中的一切。仅供参考，我也尝试过这个：

document.getElementsByClassName('child-of-child1').childNodes[0].nodeValue = "";

但没有，什么都不起作用，文本仍然存在。。。

注意：我无法进入源代码来实际更改或向文本添加元素或类名。否则，我就不会麻烦了。

你能帮忙吗？

Answer 1

您可以轻松过滤直接子级中的文本节点：

var container = document.querySelector('.child1');
for(var node of container.childNodes) {
if (node.nodeType === Node.TEXT_NODE) {
container.removeChild(node);
}
}

<div class="parent">
<div class="child1">
THIS WILL DISAPPEAR
THIS WILL DISAPPEAR
<div class="child-of-child1">
A lot of elements here
</div>
THIS WILL DISAPPEAR
</div>
</div>

Answer 2

var cNodes = document.querySelector('.child1').childNodes;
if(cNodes.length>0)
cNodes[cNodes.length-1].nodeValue="";

<div class="parent">
<div class="child1">
<div class="child-of-child1">
A lot of elements here
</div>
TEXT I LIKE TO REMOVE
</div>
</div>
Hello

Answer 3

您可以通过它前面的元素来定位它，然后获得它的nextSibling:

const textNode = document.querySelector(".parent .child1 .child-of-child1").nextSibling;
textNode.parentNode.removeChild(textNode);

实例：

setTimeout(() => {
const textNode = document.querySelector(".parent .child1 .child-of-child1").nextSibling;
textNode.parentNode.removeChild(textNode);
}, 800);

<div class="parent">
<div class="child1">
<div class="child-of-child1">
A lot of elements here
</div>
TEXT I LIKE TO REMOVE
</div>
</div>