How to remove all children of contenteditable element?

Question

I need to delete all children of a div after clicking enter. There is a div and event listener below.

<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);
    }
}

As you can see the contenteditable elements is added an element in according with clicking enter - it depends on browser what element will be added.In my case I use chrome and here are inserted div. So, the result after clicking enter on the area but without removing

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

and , with removing

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

But , the needed result is

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

Answer 1

The code mostly works, however there were two main issues.

• keyCode is deprecated. you should be using key which turns the syntax of searching for a key into looking for a string. This means instead of 13 you just check to see if key is Enter .

• Secondly you need to pass the event to your public_mode function so that you can read the key that has been pressed when the event occurs. You also need to use preventDefault to prevent it from adding a new line after removing everything from the original contentEditable area when it does detect 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

Pass the key event as an argument to your function.

Also, if you do not want the newline entered in your div, you can prevent the event from continuing with 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

target the dom by id

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

save the number of childrens

var num = s.children.length;

and remove the num of childs of element

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

and inner for some thext

s.innerHTML = "";