Не удается удалить текст в DOM, который не имеет элемента или тега

Question

Я сейчас занят этим, но не могу разобраться. Я проверил все ответы на этой странице, но все еще не могу заставить его работать. Текст остается на странице.

Использование .text () для извлечения только текста, не вложенного в дочерние теги

My 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>

Что я пробовал, так это все в этой топи c. Просто для справки, я также попробовал это:

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

Вы можете нацелить его через элемент перед ним, а затем получить его nextSibling:

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

Live Пример:

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>

Answer 3

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