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

单击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。 因此，在区域上单击enter但不删除后的结果

而且，随着

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

但是，需要的结果是

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

---

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

此外，如果不希望在div中输入换行符，可以使用event.preventDefault阻止事件继续

document.onreadystatechange=函数{ 如果document.readyState=='complete'{ const area=document.getElementById'area' 区域。添加了监听器“按键”，公共模式； 重点领域； } } 函数公共事件{ 如果window.event.keyCode==13{ 发送消息； 违约事件； } } 函数sendMessage{ const area=document.getElementById'area'； 而我是第一个孩子{ area.removechildera.firstChild； } }

---

按回车键删除我 代码基本上是有效的，但是有两个主要问题

keyCode已弃用。您应该使用key，它将搜索键的语法转换为查找字符串。这意味着您只需检查键是否为Enter，而不是13

其次，您需要将事件传递给public_mode函数，以便读取事件发生时按下的键。您还需要使用preventDefault来防止它在检测到Enter时删除原始contentEditable区域中的所有内容后添加新行

document.onreadystatechange=函数{ 如果document.readyState=='complete'{ document.getElementByIdarea.addEventListenerkeypress，公共模式； } 函数公共事件{ var key=event.key； 如果键===输入{ 违约事件； 发送消息； } } 函数sendMessage{ var area=document.getElementByIdarea； 而area.firstChild area.removechildera.firstChild； } } 区域{ 最小宽度：100vw； 边框：1px纯黑； }

---

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

area.innerHTML = '';

通过id将dom作为目标

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

保存孩子的数量

var num = s.children.length;

并删除元素的child数

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

---

我的移动方式和这个没有区别。另外，你的移动方式要慢得多@zfrisch，我只是给出了一种替代方法。答案已经给出。决定是调用preventDefaultmethod。它不取决于删除元素的方式。@Sckoriy是的，我明白了，需要preventDefaultmethod，答案正确吗？我应该知道preventDefault的作用更大。我知道，由于发送表单而调用此方法时，页面不会重新加载。在我的情况下，prevent的目的是防止在单击enter后添加新行。@Sckoriy如果您考虑到每个元素，某些元素在生成时具有默认功能。a、 e.点击文本区域中的enter键创建新行，点击表单中的Submit按钮执行网络请求，等等。问题是-由于这些事件函数是在添加这些元素时内置的，如果您不希望它们完全按照描述工作，该怎么办？解决方法是，您可以将新事件侦听器添加到默认正在监视的同一事件中，并且通过在新事件侦听器中调用event.preventDefault，您可以停止触发默认行为。

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

s.innerHTML = "";