javascript - 使用 mouseout DOM 删除 textNode

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

从“disappear”调用中移除 ( ) 以正确定义监听器方法并使用 void 字符串设置框内容

 .....

 box.addEventListener('mouseout', disappear);

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