单击以删除突出显示的文本

Question

下面的代码允许我突出显示文本。有没有办法删除突出显示的文本（即不再突出显示的文本）

1. 单击突出显示的文本，然后按“删除”按钮或
2. 双击它？

我还希望从元素 highlights 中删除此突出显示的文本。

var lastSelection;
document.addEventListener("selectionchange", function() {
  lastSelection = window.getSelection();
});
var highlights = document.createElement("div");

function getRightClick(e) {
  var rightclick;
  if (!e) var e = window.event;
  if (e.which) rightclick = (e.which == 3);
  else if (e.button) rightclick = (e.button == 2);
  return rightclick; // true or false
}

function getSelectionCharacterOffsetsWithin(btnColor) {
  var selectedText = "null";
  if (typeof window.getSelection != "undefined") {
    var selection = window.getSelection();
    selectedText = selection.toString();
    var range = selection.getRangeAt(0);
    //Strip trailing punctation
    selectedText = selectedText.replace(/[\s.,!?:;'"-]+$/, "");
    //Leading space / quotes
    var offset = 0;
    var match = selectedText.match(/^[\s"']+/);
    if (match)
      offset = match[0].length;
    selectedText = selectedText.replace(/^[\s"']+/, "");
    if (selectedText === "") {
      alert("Error: you must select at least one character");
      tartOffset = 0, endOffset = 0, selectedText = "null";
    } else {
      var newInputid = parseInt(Math.random() * 10000);
      //This is code to keep word highlighted after selecting
      var newNode = document.createElement("span");
      newNode.classList.add('chosen');
      var previd = ("i" + newInputid);
      newNode.classList.add(previd);
      newNode.appendChild(range.extractContents());
      range.insertNode(newNode);
      var textSegment = $("." + previd);
      textSegment[0].style.backgroundColor = btnColor;
    }
  }
  return {
    text: selectedText,
    cid: previd
  };
}

$('.article').mousedown(function(event) {
  $('body').attr('mouse-top', event.clientY + window.pageYOffset);
  $('body').attr('mouse-left', event.clientX);

  if (!getRightClick(event)) {
    $('.entity_types').hide();
    document.getSelection().removeAllRanges();
  }
});

$('.article').mouseup(function(event) {
  if (lastSelection.toString().length > 1 && !getRightClick(event)) {
    $('.entity_types').css({
      display: 'block',
      position: 'absolute',
      top: event.clientY + 15,
      left: event.clientX + 10
    });

    $('.entity_types button').on('click', function(e) {
      e.preventDefault();
      var btnColor = $(this)[0].style.color;
      var selOffsets = getSelectionCharacterOffsetsWithin(btnColor);
      var selectedText = selOffsets.text;
      var selectedID = selOffsets.cid
      var txt = document.createTextNode(selectedText);
      highlights.appendChild(txt);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='entity_class' class="entity_types">
  <button class="btn" style="color:green">Class 1</button>
  <button class="btn" style="color:red">Class 2</button>
  <button class="btn" style="color:purple">Class 3</button>
</div>

<div class="article" style="overflow-x:auto;">
  What is missing from this statement, and likely to be asked by lawmakers, is why it took a newspaper to discover this breach of Facebook's systems. And, once Facebook knew, why it didn't notify the public and regulators immediately - instead of doing
  everything it could to block the story.
</div>

Answer 1

使用事件委托，这将在双击所有带有.chosen 类的span 时清除：

$('.article').on('dblclick', '.chosen', function() {
  (this).replaceWith(this.innerText);
});

例子：

var lastSelection;
document.addEventListener("selectionchange", function() {
  lastSelection = window.getSelection();
});
var highlights = document.getElementById("highlights");

function getRightClick(e) {
  var rightclick;
  if (!e) var e = window.event;
  if (e.which) rightclick = (e.which == 3);
  else if (e.button) rightclick = (e.button == 2);
  return rightclick; // true or false
}

function getSelectionCharacterOffsetsWithin(btnColor) {
  var selectedText = "null";
  if (typeof window.getSelection != "undefined") {
    var selection = window.getSelection();
    selectedText = selection.toString();
    var range = selection.getRangeAt(0);
    //Strip trailing punctation
    selectedText = selectedText.replace(/[\s.,!?:;'"-]+$/, "");
    //Leading space / quotes
    var offset = 0;
    var match = selectedText.match(/^[\s"']+/);
    if (match)
      offset = match[0].length;
    selectedText = selectedText.replace(/^[\s"']+/, "");
    if (selectedText === "") {
      alert("Error: you must select at least one character");
      tartOffset = 0, endOffset = 0, selectedText = "null";
    } else {
      var newInputid = parseInt(Math.random() * 10000);
      //This is code to keep word highlighted after selecting
      var newNode = document.createElement("span");
      newNode.classList.add('chosen');
      var previd = ("i" + newInputid);
      newNode.setAttribute('data-cid', previd);
      newNode.appendChild(range.extractContents());
      newNode.style.backgroundColor = btnColor;
      range.insertNode(newNode);
    }
  }
  return {
    text: selectedText,
    cid: previd
  };
}

$('.article').mousedown(function(event) {
  $('body').attr('mouse-top', event.clientY + window.pageYOffset);
  $('body').attr('mouse-left', event.clientX);

  if (!getRightClick(event)) {
    $('.entity_types').hide();
    document.getSelection().removeAllRanges();
  }
});

$('.article').mouseup(function(event) {
  if (lastSelection.toString().length > 1 && !getRightClick(event)) {
    $('.entity_types').css({
      display: 'block',
      position: 'absolute',
      top: event.clientY + 15,
      left: event.clientX + 10
    });
  }
});

$('.entity_types button').on('click', function(e) {
  e.preventDefault();
  var btnColor = $(this)[0].style.color;
  var selOffsets = getSelectionCharacterOffsetsWithin(btnColor);
  var selectedText = selOffsets.text;
  var selectedID = selOffsets.cid
  var txt = document.createTextNode(selectedText);
  var span = document.createElement('span');
  span.appendChild(txt);
  span.setAttribute('data-cid', selectedID);
  span.classList.add('highlighted');
  highlights.appendChild(span);
});

$('.article').on('dblclick', '.chosen', function() {
  var cid = this.getAttribute('data-cid');
  highlights.querySelector('[data-cid=' + cid + ']').remove();
  (this).replaceWith(this.innerText);
});

.highlighted:not(:last-child) {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='entity_class' class="entity_types">
  <button class="btn" style="color:green">Class 1</button>
  <button class="btn" style="color:red">Class 2</button>
  <button class="btn" style="color:purple">Class 3</button>
</div>

<div class="article" style="overflow-x:auto;">
  What is missing from this statement, and likely to be asked by lawmakers, is why it took a newspaper to discover this breach of Facebook's systems. And, once Facebook knew, why it didn't notify the public and regulators immediately - instead of doing
  everything it could to block the story.
</div>

<br>

<div id="highlights"></div>