Question

点击Enter后，我需要删除div的所有子级。下面有一个div和事件监听器。

<div id = "area" contenteditable="true"></div>

document.onreadystatechange = function(){
    if(document.readyState == 'complete'){
        document.getElementById("area").addEventListener("keypress" , public_mode);
}

function public_mode(){
    var key = window.event.keyCode;
      if (key == 13) {
         sendMessage();
    }
}

function sendMessage(){
    var area = document.getElementById("area");
    while (area.firstChild) {
        area.removeChild(area.firstChild);
    }
}

您可以看到contenteditable元素是通过单击Enter添加的元素-取决于浏览器将添加什么元素。在我的情况下，我使用chrome并在其中插入div。因此，点击该区域后的结果为不删除

<div id = "area" contenteditable = "true">
     Sckoriy
     <div></div>
</div>

and，并删除

<div id = "area" contenteditable = "true">
     <div></div>
     <div></div>
</div>

但是，所需的结果是

 <div id = "area" contenteditable = "true">
     //Empty
 </div>

Answer 1

该代码大部分有效，但是有两个主要问题。

keyCode已过时。您应该使用key，它将搜索键的语法转换为寻找字符串。这意味着您只需检查13是否为key而不是Enter。
其次，您需要将事件传递给public_mode函数，以便您可以读取事件发生时按下的key。您还需要使用preventDefault来防止在检测到Enter

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    document.getElementById("area").addEventListener("keypress", public_mode);
  }

  function public_mode(event) {
    var key = event.key;
    if (key === "Enter") {
      event.preventDefault();
      sendMessage();
    }
  }

  function sendMessage() {
    var area = document.getElementById("area");
    while (area.firstChild) area.removeChild(area.firstChild);
  }
}

#area {
  min-width: 100vw;
  border: 1px solid black;
}

<div id="area" contenteditable="true"></div>

Answer 2

将键事件作为参数传递给函数。

此外，如果您不想在div中输入换行符，则可以阻止事件以event.preventDefault()继续。

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    const area = document.getElementById('area')
    area.addEventListener('keypress', public_mode);
    area.focus();
  }
}

function public_mode(event) {
  if (window.event.keyCode == 13) {
    sendMessage();
    event.preventDefault();
  }
}

function sendMessage() {
  const area = document.getElementById('area');
  while (area.firstChild) {
    area.removeChild(area.firstChild);
  }
}

<div id="area" contenteditable="true">Press Enter to erase me!</div>

Answer 3

您可以将innerHTML属性设置为一个空字符串；

area.innerHTML = '';

Answer 4

通过ID定位dom

var s = document.getElementById("area");

保存孩子数

var num = s.children.length;

并删除元素的子元素数量

for(var i=0;i<num;i++){
   s.children[0].remove()
 }

和一些内在的

s.innerHTML = "";

如何删除所有内容可编辑元素的子元素？

4 个答案: