如何删除contenteditable元素的所有子级？

Question

单击回车后，我需要删除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>

并且，删除

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

但是，所需的结果是

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

Answer 1

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

• 不推荐使用keyCode 。 您应该使用key ，它将搜索key的语法转换为寻找字符串。 这意味着您只需检查key是否为Enter即可代替13 。

• 其次，您需要将事件传递给public_mode函数，以便可以读取事件发生时按下的key 。 你还需要使用preventDefault从原来的CONTENTEDITABLE区域除去一切之后，以防止它添加一个新行，当它检测到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

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

另外，如果您不想在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 = "";