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

Question

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

使用 .text() 仅检索未嵌套在子标签中的文本

我的HTML：

我创建了一个热图函数，我将使用它来使用 PHP 7.2 填充 html 表格的单元格。

这是我的功能：

function bg($latency) {

    if ($latency ==0) {echo '#11FFFF';} 

    elseif ($latency <30) {echo '#22FFFF';} 

    elseif ($latency <60) {echo '#33FFFF';} 

    elseif ($latency <90) {echo '#44FFFF';} 

    elseif ($latency <120) {echo '#55FFFF';} 

    elseif ($latency <150) {echo '#66FFFF';} 

    elseif ($latency <180) {echo '#77FFFF';} 

    elseif ($latency <210) {echo '#88FFFF';} 

    elseif ($latency <240) {echo '#99FFFF';} 

    elseif ($latency <270) {echo '#AAFFFF';} 

    elseif ($latency <300) {echo '#BBFFFF';} 

    elseif ($latency >=300) {echo '#CCB27F';} 

}

我使用简单的 select 语句从 MySQL 表中提取值，然后尝试使用以下代码片段构建表：

while($row = mysqli_fetch_assoc($result)) {

    echo '<tr><td>'.$row['origin'].'</td><td bgcolor='.bg($row['lt01']).'>'.$row['lt01'].'</td></tr>';

}

但由于某种原因，输出出现乱码，函数输出出现在 HTML 源代码之前：

#11FFFF<tr><td>LT01</td><td bgcolor=>0</td></tr>

#22FFFF<tr><td>LT02</td><td bgcolor=>11</td></tr>

#44FFFF<tr><td>LT03</td><td bgcolor=>62</td></tr>

#44FFFF<tr><td>LT04</td><td bgcolor=>74</td></tr>

#99FFFF<tr><td>LT05</td><td bgcolor=>214</td></tr>

我一生都无法弄清楚这一点。

Answer 1

您可以轻松过滤直接子节点中的文本节点：var container = document.querySelector('.child1');for(var node of container.childNodes) {&nbsp; if (node.nodeType === Node.TEXT_NODE) {&nbsp; &nbsp; container.removeChild(node);&nbsp; }}<div class="parent">&nbsp; &nbsp; <div class="child1">&nbsp; &nbsp; &nbsp; &nbsp; THIS WILL DISAPPEAR&nbsp; &nbsp; &nbsp; &nbsp; THIS WILL DISAPPEAR&nbsp; &nbsp; &nbsp; &nbsp; <div class="child-of-child1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A lot of elements here&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; THIS WILL DISAPPEAR&nbsp; &nbsp; </div></div>

Answer 2

var cNodes = document.querySelector('.child1').childNodes;&nbsp;if(cNodes.length>0)&nbsp;cNodes[cNodes.length-1].nodeValue="";<div class="parent">&nbsp; &nbsp; <div class="child1">&nbsp; &nbsp; &nbsp; &nbsp; <div class="child-of-child1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A lot of elements here&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; TEXT I LIKE TO REMOVE&nbsp; &nbsp; </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>