Удалить textNode с помощью мыши DOM

Question

Я создал кнопку, которая отображает поле при нажатии, а затем при наведении мыши на класс блока (который представляет собой boxCount) отображается в виде текста.Теперь я хочу удалить этот текст при наведении мыши.Я пробовал бесчисленные варианты, и я не могу получить это.Мои предыдущие попытки закомментированы.

Я также пробовал варианты 'removeChild'.Ниже приведен фрагмент моего кода, но здесь есть ссылка на JSbin

    function addBox() {
        let box = document.createElement('div');
        container.appendChild(box);
        box.className = 'box';

        let boxText = document.createTextNode(boxCount);
        boxText = boxCount++;
        boxText.className = 'boxText';

        box.addEventListener('mouseover', function() {
            box.append(boxText);
        });

        box.addEventListener('mouseout', disappear());

        function disappear() {
                console.log('worked');
                // boxText = "";

                // let newText =document.getElementsByClassName('box');
                // newText = " ";
                // box.append(newText);

                // document.getElementById('box').style.display="none";

                // let boxText = document.createTextNode("");
                // box.appendChild(boxText);
                // boxText.parentNode.removeChild(boxText);

                // boxCount.nodeValue = '';

                // var boxText = document.createElement('p');
                // boxText.textContent = "";
                // box.append(boxText); 
        }
    };
})

Answer 1

Remove () из вызова «исчезнуть» для правильного определения метода слушателя и установки содержимого поля с пустой строкой

 .....

 box.addEventListener('mouseout', disappear);

 function disappear() {             
    box.innerHTML = "";
 }

Answer 2

Получите дочерний узел и удалите его из родительского, где текстовый узел может получить, используя свойство Node#childNodes, и удалите его из DOM, используя метод Node#removeChild или просто используйте ChildNode#remove метод удаления узла.

box.childNodes[0].remove();

// or
box.removeChild(box.childNodes[0])

---

Еще две вещи, добавляющие свойство className к textNode, не вносят никаких изменений (что не имеет никакого смысла)и когда вы привязываете mouseout ссылку на функцию использования обработчика событий, не используйте ее как disappear(), которая вызывает и устанавливает возвращаемое значение в качестве обратного вызова.

box.addEventListener('mouseout', disappear);
// remove parentheses -------------------^^--

---

let container = document.body;

let box = document.createElement('div');
container.appendChild(box);
box.className = 'box';

let boxText = document.createTextNode(1);


box.addEventListener('mouseover', function() {
  box.append(boxText);
});

box.addEventListener('mouseout', disappear);

function disappear() {
  console.log('worked');
  box.childNodes[0].remove();
  //box.removeChild(box.childNodes[0])
}

.box {
  width: 100px;
  height: 100px;
  background: grey;
}