What is the best way to delete multiple highlighted contenteditable elements in HTML?

Question

What is the best way to delete multiple highlighted contenteditable elements in HTML?

Is there a way to easily delete multiple HTML elements by selecting them and pressing the Backspace key? This functionality is available in the WordPress block editor as well as Editor.js. Users can highlight several blocks and remove them with a simple keystroke. To achieve this, one would need to select (not click) the .block-1, .block-2, .block-3 sections and then press the Backspace key to delete them.

[IMPORTANT]

Make sure each block has the contenteditable attribute.
For a demonstration of what I am looking for, please visit Editor.js.

<div class="block-1" contenteditable="true"> 1st Block </div>
<div class="block-2" contenteditable="true"> 2nd Block </div>
<div class="block-3" contenteditable="true"> 3rd Block </div>
<div class="block-4" contenteditable="true"> 4th Block </div>

https://i.sstatic.net/G2At4.png

javascript html css

Answer 1

Answer №1

We require 2 listeners:

1 - on mouseup, which captures the selected text, uses TreeWalker to retrieve all highlighted elements and toggles the selected class on .blocks.
2 - on keyup, designed to detect backspace actions

Edit:

Utilized This link to enhance the answer .

$(document).on({
  'keyup': function(e) {
    if (e.which == 8)
      $('div.block.selected').remove();
  },
  'mouseup': getSelectedElementTags
});


function rangeIntersectsNode(range, node) {
  var nodeRange;
  if (range.intersectsNode) {
    return range.intersectsNode(node);
  } else {
    nodeRange = node.ownerDocument.createRange();
    try {
      nodeRange.selectNode(node);
    } catch (e) {
      nodeRange.selectNodeContents(node);
    }

    return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
      range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
  }
}

function getSelectedElementTags() {
  var win = window;
  var range, sel, elmlist, treeWalker, containerElement;
  sel = win.getSelection();
  if (sel.toString().length == 0) return
  if (sel.rangeCount > 0) {
    range = sel.getRangeAt(0);
  }

  if (range) {
    containerElement = range.commonAncestorContainer;
    if (containerElement.nodeType != 1) {
      containerElement = containerElement.parentNode;
    }

    treeWalker = win.document.createTreeWalker(
      containerElement,
      NodeFilter.SHOW_ELEMENT,
      function(node) {
        return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      },
      false
    );

    elmlist = [treeWalker.currentNode];
    while (treeWalker.nextNode()) {
      elmlist.push(treeWalker.currentNode);
    }
    elmlist.forEach(function(e) {
      if ($(e).hasClass('block')) {
        $(e).toggleClass('selected');
      }
    });
    sel.empty()
  }
}

div.block.selected {
  background-color: #ddf;
}

div.block {
  margin: 24px;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" contenteditable="true">
  <div class="block block-1" contenteditable="true"> 1st Block</div>
  <div class="block block-2" contenteditable="true"> 2nd Block </div>
  <div class="block block-3" contenteditable="true"> 3rd Block</div>
  <div class="block block-4"> 4th Block </div>
</div>

Answer 2

We require 2 listeners:

1 - on mouseup, which captures the selected text, uses TreeWalker to retrieve all highlighted elements and toggles the selected class on .blocks.
2 - on keyup, designed to detect backspace actions

Edit:

Utilized This link to enhance the answer .

$(document).on({
  'keyup': function(e) {
    if (e.which == 8)
      $('div.block.selected').remove();
  },
  'mouseup': getSelectedElementTags
});


function rangeIntersectsNode(range, node) {
  var nodeRange;
  if (range.intersectsNode) {
    return range.intersectsNode(node);
  } else {
    nodeRange = node.ownerDocument.createRange();
    try {
      nodeRange.selectNode(node);
    } catch (e) {
      nodeRange.selectNodeContents(node);
    }

    return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
      range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
  }
}

function getSelectedElementTags() {
  var win = window;
  var range, sel, elmlist, treeWalker, containerElement;
  sel = win.getSelection();
  if (sel.toString().length == 0) return
  if (sel.rangeCount > 0) {
    range = sel.getRangeAt(0);
  }

  if (range) {
    containerElement = range.commonAncestorContainer;
    if (containerElement.nodeType != 1) {
      containerElement = containerElement.parentNode;
    }

    treeWalker = win.document.createTreeWalker(
      containerElement,
      NodeFilter.SHOW_ELEMENT,
      function(node) {
        return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      },
      false
    );

    elmlist = [treeWalker.currentNode];
    while (treeWalker.nextNode()) {
      elmlist.push(treeWalker.currentNode);
    }
    elmlist.forEach(function(e) {
      if ($(e).hasClass('block')) {
        $(e).toggleClass('selected');
      }
    });
    sel.empty()
  }
}

div.block.selected {
  background-color: #ddf;
}

div.block {
  margin: 24px;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" contenteditable="true">
  <div class="block block-1" contenteditable="true"> 1st Block</div>
  <div class="block block-2" contenteditable="true"> 2nd Block </div>
  <div class="block block-3" contenteditable="true"> 3rd Block</div>
  <div class="block block-4"> 4th Block </div>
</div>

Answer 3

Answer №2

Here is a code snippet that eliminates the need for CSS and the contenteditable attribute:

var targeted;

document.getElementById('container').addEventListener('click', function(event) {
    console.log(event.target); // Identify the targeted element
    if(event.target.id !== 'container') {
        targeted = event.target;
    } else {
        targeted = undefined;
    };
});

document.addEventListener('keydown', function(event) {
    if(event.keyCode === 8 && targeted) {
        targeted.parentNode.removeChild(targeted);
    };
});

#container {
    padding: 20px;
    background-color: black;
}
#container div {
    margin-bottom: 5px;
    height: 50px;
    width: 200px;
    background-color: white;
}

<div id="container">
    <div contenteditable="true">1</div>
    <div contenteditable="true">2</div>
    <div contenteditable="true">3</div>
    <div contenteditable="true">4</div>
    <div contenteditable="true">5</div>
</div>

Answer 4

Here is a code snippet that eliminates the need for CSS and the contenteditable attribute:

var targeted;

document.getElementById('container').addEventListener('click', function(event) {
    console.log(event.target); // Identify the targeted element
    if(event.target.id !== 'container') {
        targeted = event.target;
    } else {
        targeted = undefined;
    };
});

document.addEventListener('keydown', function(event) {
    if(event.keyCode === 8 && targeted) {
        targeted.parentNode.removeChild(targeted);
    };
});

#container {
    padding: 20px;
    background-color: black;
}
#container div {
    margin-bottom: 5px;
    height: 50px;
    width: 200px;
    background-color: white;
}

<div id="container">
    <div contenteditable="true">1</div>
    <div contenteditable="true">2</div>
    <div contenteditable="true">3</div>
    <div contenteditable="true">4</div>
    <div contenteditable="true">5</div>
</div>

What is the best way to delete multiple highlighted contenteditable elements in HTML?

Answer №1

Edit:

Answer №2

Similar questions

Tips for utilizing nested loops along with promise map

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

How to automatically center Google Maps and update marker on responsive resize

What could be causing my webpage to freeze every time a filter button is selected?

What could be causing my ul list to not be populated by ajax?

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

Callback function for asynchronous operations on the client side with Meteor

Concerns arise with the swal destroy functionality

Encountering difficulties retrieving JSON response from Express in a production environment

An easy method to alter the color of the unique "special" character

Utilizing web forms for dynamic CSS modifications

Silly problem arising from the animate feature in jQuery

What is the best way to place a child on top of a different parent in the stack?

Accessing a hyperlink within the existing page

Encountering a ReactJs and TypeScript error: "menuItems.map is not a function, issue with map method"

Avoiding Navbar Link Clicks due to Z-Index

How can I trigger the offcanvas opening in Bootstrap 5 through code?

Using jQuery and Ajax to efficiently handle the retrieval of large files while browsing