我怎么能清空这个div？

Question

I write a div and set contenteditable is true, so it can be editable.

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

and first I wrote something in it like "hello" open the console I see the code has changed to

<div id="editor" contenteditable="true">hello</div>

but when I cleared the word I've input in this div and input something new in it again I saw the console, the code was like this:

<div id="editor" contenteditable="true">
    "hello"
    ""
</div>

and The times that I delete is "" appears.

I've tried to $("#editor").empty() when detect DOMNodeRemoved but it didn't work....

How can I empty this div?

Answer 1

Simply use below code to empty your div container:

$("#editor").text('')

Here is sample code that clears the container for you:

 $('.clear').click(function(){ $('#editor').text('') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="editor" contenteditable="true"> "hello" "" </div> <button class="clear">clear</button> 

Answer 2

very simple

$('#editor').html('');

or

jQuery('#editor').html('');

try this

Answer 3

.html('') will work in your case. $('#editor').html('');

To listen for changes we can use:

$("#editor").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' => removed');
});

See example:

 setTimeout(function() { $('#editor').html(''); }, 1000); $("#editor").on('DOMNodeRemoved', function(e) { console.log(e.target, ' => removed'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="editor" contenteditable="true"> "hello" "" </div> 

Answer 4

Do something like this

$("#editor").text(""); - If this selector is a label
$("#editor").val(""); - If this selector is a input control

Sameway you can do for multiple using class names

$(".editorClass").text("");
$(".editorClass").val("");