How to delete an HTML element inside a div with attribute contentEditable?

Asked
Active3 hr before
Viewed126 times

6 Answers

insidedeleteelement
90%

Because you want to delete the whole element, it's better to make it contenteditable="false" so that browser won't let the contents of an element to be deleted., wow... what a alarming simple solution! setting the contenteditable to false of the div I wanted to delete let me delete the div in one go! – Ayudh May 6 '20 at 3:49 , Please could you provide more information about what should happen when the user presses backspace when, for example, the caret is in the middle of a text node, or at the start of the editable area. – Tim Down Feb 1 '10 at 18:18 ,This turned out to be more complicated than I thought. Or I've made it more complicated than it needs to be. Anyway, this should work in all the big browsers:

This turned out to be more complicated than I thought. Or I've made it more complicated than it needs to be. Anyway, this should work in all the big browsers:

function getLastTextNodeIn(node) {
   while (node) {
      if (node.nodeType == 3) {
         return node;
      } else {
         node = node.lastChild;
      }
   }
}

function isRangeAfterNode(range, node) {
   var nodeRange, lastTextNode;
   if (range.compareBoundaryPoints) {
      nodeRange = document.createRange();
      lastTextNode = getLastTextNodeIn(node);
      nodeRange.selectNodeContents(lastTextNode);
      nodeRange.collapse(false);
      return range.compareBoundaryPoints(range.START_TO_END, nodeRange) > -1;
   } else if (range.compareEndPoints) {
      if (node.nodeType == 1) {
         nodeRange = document.body.createTextRange();
         nodeRange.moveToElementText(node);
         nodeRange.collapse(false);
         return range.compareEndPoints("StartToEnd", nodeRange) > -1;
      } else {
         return false;
      }
   }
}

document.getElementById("editable").onkeydown = function(evt) {
   var sel, range, node, nodeToDelete, nextNode, nodeRange;
   evt = evt || window.event;
   if (evt.keyCode == 8) {
      // Get the DOM node containing the start of the selection
      if (window.getSelection && window.getSelection().getRangeAt) {
         range = window.getSelection().getRangeAt(0);
      } else if (document.selection && document.selection.createRange) {
         range = document.selection.createRange();
      }

      if (range) {
         node = this.lastChild;
         while (node) {
            if (isRangeAfterNode(range, node)) {
               nodeToDelete = node;
               break;
            } else {
               node = node.previousSibling;
            }
         }

         if (nodeToDelete) {
            this.removeChild(nodeToDelete);
         }
      }
      return false;
   }
};
load more v
88%

Wanted to test if the entire node be deleted with a single backspace and to my surprise Firefox couldn't delete the elements. ,I have created a DIV with attribute contenteditable=true and appended children like span and a with attributes contenteditable=false. ,This is required in Firefox only. Other browsers treat this as expected with the span having content contenteditable=false.,Also, this works as expected in all major desktop browsers except Firefox. Any clues on this or what could be the possible workaround?

Okay! found the solution... its rather simple than what you would think. I am actually inserting html for links, so using <a> here. The <a> tag has attribute set to contenteditable=false and its not getting deleted with a backspace. So I have created an inner <span> level with contenteditable=true for firefox and that did the trick.

<div contentEditable="true">
   <a href="your/url/path" contentEditable="false">
      <span contentEditable="true">link here</span>
   </a>
</div>
load more v
72%

need that the span (and all text inside) is removed with a single backspace, is it possible?,The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).,Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).,You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):

have this html:

<div id="editable" contentEditable="true">
   <span contentEditable="false">Text to delete</span>
</div>
load more v
65%

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.,Here's a simple example which creates a <div> element whose contents the user can edit.,Example: A simple but complete rich text editor,The contenteditable global attribute

<div contenteditable="true">
   This text can be edited by the user.
</div>
load more v
75%

This attribute will be used to make read-only HTML elements into the text editor. After adding this attribute you can easily edit the text inside the element same as a Textarea.,Define contentEditable attribute with value true to make an element editable.,The contentEditable attribute takes – empty string, inherit, true, or false.,In this tutorial, I show how you can do this with the contentEditable attribute.

<div class='editable' contentEditable="true">Click and edit the text</div>
<span class='editable' contentEditable="true">Click and edit the text</span><br />
<label class='editable' contentEditable="true">Click and edit the text</label><br />
<p class='editable' contentEditable="true">Click and edit the text</p>
load more v
40%

$("#mylabel").click(function() {
   var value = $('#editablediv').attr('contenteditable');

   if (value == 'false') {
      $('#editablediv').attr('contenteditable', 'true');
   } else {
      $('#editablediv').attr('contenteditable', 'false');
   }
});

Other "inside-delete" queries related to "How to delete an HTML element inside a div with attribute contentEditable?"