How Can I Take Elements Out Of The DOM, After Pasting Or Dropping Something?

I am using jQuery's remove() function to delete everything that is pasted/dropped in a contenteditable area, except for text. I am especially interested in disabling images. I trie

Solution 1:

I think you don't need the interval for it. Just set the content with

function removeImg() {
document.getElementById("editableDiv").innerHTML = "<p>Images that you paste or drop here should be automatically removed.</p>";
}

What you can also do, is when the text changes, save it to a variable and then load it when an image is dropped.

var content;
document.getElementById("editableDiv").oninput = function() {
content = document.getElementById("editableDiv").innerHTML;
}
function removeImg() {
document.getElementById("editableDiv").innerHTML = content;
}

Hope this helped!

Solution 2:

I think you want to remove elements from body not contenteditable div? Then you can do it like this:

-Find all images, add addEventListener mousedown

-on mouse down add auto incremented id, in this example:clicked2 ++ numbers. You do this in order that you have unique id even if user does not drop item. On every mouse down new id is added on clicked element. If id does not suit you you can do classes or anything really.

-Then you call your function on drop to remove element if its drooped with last generated id.

You can apply same logic to any element selector, not just img, just make selector document.querySelectorAll('body *')

var i = 0;
var removeID="";
[...document.querySelectorAll('img')].forEach(img => {
  img.addEventListener('mousedown', event => {
    img.id = "clicked"+(++i);
    console.clear();    
    removeID=img.id;
    console.log(removeID);
  })
})
function removeImg() {
  document.getElementById(removeID).remove();
}

#editableDiv {
  padding-left: 10px;
  width: 100%;
  border: solid 1px blue;
}

img {
  width: 100px;
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editableDiv" contenteditable onpaste="removeImg();" ondrop="removeImg();">
  <p>Images that you paste or drop here should be automatically removed.</p>
</div>
<hr>
<p>You can use these images:</p>
<img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<p>Either copying-pasting or dragging-dropping them don't work...</p>

Example using classes and all elements:

var i = 0;
var removeClass="";
[...document.querySelectorAll('body *')].forEach(el => {
  el.addEventListener('mousedown', event => {
    el.classList.add("clicked"+(++i));
    console.clear();    
    removeClass="clicked"+(+i);
    console.log(removeClass)
  })
})
function removeImg() {
  document.querySelector("."+removeClass).remove();
}

#editableDiv {
  padding-left: 10px;
  width: 100%;
  border: solid 1px blue;
}

img {
  width: 100px;
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editableDiv" contenteditable onpaste="removeImg();" ondrop="removeImg();">
  <p>Images that you paste or drop here should be automatically removed.</p>
</div>
<hr>
<p>You can use these images:</p>
<img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<p>Either copying-pasting or dragging-dropping them don't work...</p>

Solution 3:

None of the answers provided a solution to what I was trying to achieve. Ended up fixing it by changing this:

function removeImg() {
  setInterval(function() {
    $("#editableDiv").contents(":not(p)").remove();
  }, 1);
}

To this:

function removeImg() {
  setTimeout(function() {
    $('#editableDiv :not(p)').remove();
  }, 1);
}