【问题标题】：How can I delete an editable div by clicking on it and then pressing the Delete key on the keyboard with Jquery?如何通过单击可编辑的 div 然后使用 Jquery 按下键盘上的 Delete 键来删除它？
【发布时间】：2019-05-27 06:14:28
【问题描述】：

我有一个属性为 contenteditable = true 的 div。我可以通过双击div来激活div内容编辑，这是因为我的div是可拖动的，所以我使用dooble click事件来激活div编辑。事实是我想通过单击它然后按键盘上的 Delete 键来消除完整的 div。我怎样才能做到这一点？我怎样才能做到当我在div上写东西并按下delete键时，整个div不会被删除？我只想在没有激活div版本的情况下删除div，只需点击div然后按删除键，瞧，它就被删除了。

这是我的 HTML 代码：

$(document).ready(function() {

  $('.draggable').draggable({
    containment: "parent"
  });

  $(".draggable").resizable();

  $('#MyFirstDiv').click(function() {
    //HERE I WANT TO PUT THE CODE TO DELETE THE DIV.
  });

  $("#myContainer").on("dblclick", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('disable');

    this.querySelector(":scope > :first-child").focus();

  });

  $("#myContainer").on("blur", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('enable');
  });

});

#myContainer {
  border: 1px solid black;
  height: 400px;
  width: 100%;
}

#DraggableDiv {
  border: 1px solid blue;
}

<!DOCTYPE html>
<html>

<head>
  <title>My Delete Div</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div class="draggable" contenteditable="true" id="DraggableDiv">
        THIS IS MY TEXT INSIDE THE DIV
      </div>
    </div>
  </div>

</body>

</html>

【问题讨论】：

要明确：你想要：“点击 div，然后按删除”还是“点击 div 并按删除同时点击 div”？
我不想在点击 div 的时候删除，我只想先点击 div 再按键盘上的 delete 键。

标签： javascript jquery html css jquery-ui

【解决方案1】：

测试

点击文本进行选择。
按 D 删除。 [遗憾的是删除键在堆栈溢出时不起作用。只需更改 if 语句中的键代码即可将键从 D 更改为 DELETE]

说明

有两个函数可以帮助解决这个问题。
Select：选中被点击的 div。
EventListener：监听按键并删除选中的div.

选择功能

全局变量 selected 存储有关所选 div 的信息。
在 select 函数中，我们使用 currentTarget.id 从事件对象“e”中获取点击的 div 的 id 名称。
select 函数中的 If 语句选择和取消选择 div。

事件监听器

使用按键监听器中的事件对象来获取按下的按键。
e.keyCode 给出密钥。 e.which 是一个后备。 [对于 ie 用户]
如果他们的 keyCode 为 100（D 键），则使用 selected 变量获取所选 div 并将其 css 显示更改为“none”。

另外还有一个else语句，当没有选择任何内容并按下键时，您可以在其中添加js。
此外，所选类的css用于反馈何时选择div。

这里是sn-p的代码：

let selected;

const select = e => {
    //If already selected, this will deselect the div
    if(selected == e.currentTarget.id) {
      document.getElementById(selected).classList.remove('selected'); //some CSS
      selected = null;
    } else {
       //select this div
      selected = e.currentTarget.id;
      document.getElementById(selected).classList.add('selected'); //some CSS
    }
}

window.addEventListener('keypress', e => {
  //Get key pressed
  let key = e.keyCode || e.which;
  if(selected != undefined) {
      if(key == 100) {//If D is pressed
        let target = document.getElementById(selected); //get the div
        target.style.display = 'none'; //hide div
        console.log('deleted: ' + selected);
      }
  } else {
    //Runs if nothing is selected. Do as you please here.
  }
})

.selected {
  background: black;
  color: white;
}

#DraggableDiv {
  user-select: none;
  cursor: pointer;
  font-family: sans-serif;
  width: 400px;
  text-align: center;
  padding: 10px 5px;
}

<!DOCTYPE html>
<html>

<head>
  <title>My Delete Div</title>

</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div id="DraggableDiv" onclick="select(event)">
        Click me and press D
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

在编辑内容时不建议使用 Delete。您需要确保用户无需编辑内容即可单击 <div> 元素本身。

由于<div> 是可拖动的，我建议使用句柄，因为click 事件和keypress 事件可能会被捕获以用于内容编辑而不是用于您的脚本。

$(function() {
  function disDrag(part) {
    var drag = part.closest(".draggable");
    drag.draggable("disable");
    $(".drag-content", drag).removeAttr("contenteditable").blur();
    part.toggleClass("ui-icon-locked ui-icon-unlocked");
  }

  function enDrag(part) {
    var drag = part.closest(".draggable");
    drag.draggable("enable");
    $(".drag-content", drag).attr("contenteditable", true).focus();
    part.toggleClass("ui-icon-locked ui-icon-unlocked");
  }

  function delDrag(part) {
    var drag = part.closest(".draggable");
    var res = confirm("Are you sure you wish to delete this item?");
    if (res) {
      drag.remove();
    }
  }

  $('.draggable')
    .draggable({
      containment: "parent",
      handle: ".ui-drag-handle",
      start: function() {
        $(".ui-drag-handle", this).data("selectable", false);
      },
      stop: function() {
        $(".ui-drag-handle", this).data("selectable", true);
      }
    })
    .resizable();

  $(".ui-drag-handle")
    .data("selectable", true)
    .click(function(e) {
      var drag = $(this).closest(".draggable");
      if ($(this).data("selectable")) {
        drag.toggleClass("drag-selected");
      }
    });

  $(".btn").click(function(e) {
    switch (true) {
      case $(this).hasClass("ui-icon-unlocked"):
        disDrag($(this));
        break;
      case $(this).hasClass("ui-icon-locked"):
        enDrag($(this));
        break;
      case $(this).hasClass("ui-icon-close"):
        delDrag($(this));
        break;
    }
  });

  $(document).keyup(function(e) {
    if (e.which == 46 && $(".drag-selected").length) {
      delDrag($(".drag-selected"));
    }
  });
});

#myContainer {
  border: 1px solid black;
  height: 400px;
  width: 100%;
}

.draggable {
  border: 1px solid blue;
}

.draggable.drag-selected {
  border: 1px solid #0f0;
}

.center {
  margin-left: 50%;
}

.right {
  float: right;
}

.ui-icon.btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 0px;
  margin-left: 1px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="myContainer">
  <div class="draggable ui-widget" id="DraggableDiv">
    <div class="ui-widget-header">
      <span class="right ui-icon ui-icon-close btn" title="Delete the item."></span>
      <span class="right ui-icon ui-icon-unlocked btn" title="Lock and disable Drag"></span>
      <div class="ui-drag-handle" style="width: calc(100% - 42px);">
        <span class="center ui-icon ui-icon-grip-dotted-horizontal"></span>
      </div>
    </div>
    <div class="drag-content" contenteditable="true">
      THIS IS MY TEXT INSIDE THE DIV
    </div>
  </div>
</div>

您可以看到这是可拖动、可调整大小和可编辑的。用户可以通过单击锁定图标来禁用拖动。如果选择 div 并单击删除（或键码 46），或者单击关闭图标，则会提示他们确认是否要删除该项目。一旦他们确认他们愿意，该项目就会被删除。

由于删除可以通过两种不同的方式触发，我创建了一个删除函数。

在结构方面，在处理更复杂的 UI 交互时，您可能无法摆脱如此简单的 HTML 结构。这个<div> 元素具有与click 事件相关的各种交互。用户单击以进行编辑、选择、拖动...最好为其中一些事件制定更具体的目标，以便您可以更好地编写事件脚本。

您可以使用对话框小部件为自己节省大量时间：https://jqueryui.com/dialog/

希望对您有所帮助。

【讨论】：

【解决方案3】：

你可以先做一个变量：divClicked，我存储div的点击状态

var divClicked = false;

然后在您的事件监听器中，更新divClicked（它将是一个切换按钮）：

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

最后，像这样添加一个删除键事件监听器：

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})

完整代码：

var divClicked = false;

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})

【讨论】：

它不起作用。当我按下删除键时，div 不会删除。控制台没有显示任何错误。
您应该像您在问题中所说的那样首先单击 div。
是的，先点击div再按delete键。只需像选择元素一样单击 div，然后按删除键。
@JackBashford 考虑 OP 是否有超过 1 个这些类型的可拖动元素。可以考虑使用.data() 来存储是否选择了可拖动对象而不是变量。

【解决方案4】：

在删除键上捕获 keydown 的最简单方法。

$('#MyFirstDiv').click(function(e){
   e.preventDefault(); 
});
$('#MyFirstDiv').keydown(function(e){
    e.preventDefault();
    if(e.keyCode == 46) {
        this.remove();
    }
});

【讨论】：

它不工作。我按了删除键，但没有删除任何内容。
你是先点击div吗？它需要成为焦点。
是的，我确实先单击了 div，然后按了删除键，但没有任何反应
任何控制台错误？你能把我链接到现场版本吗？我可以看看
I have double checked the code using your code above, it definitely deletes when the box is selected and delete is pressed.如果 JS 来自外部源文件，请尝试刷新缓存。 output.jsbin.com/xurojeraba