无法删除 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) {

  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>