动态添加得不可编辑元素如何选中删除

如果您想要删除一个动态添加的不可编辑元素，您可以使用JavaScript来选中并删除该元素。以下是一个简单的示例代码：

// 选中要删除的元素
var elementToDelete = document.getElementById('id-of-element-to-delete');

// 从父元素中移除该元素
elementToDelete.parentNode.removeChild(elementToDelete);

在这个代码片段中，我们首先通过使用 `document.getElementById()` 方法找到要删除的元素。然后，我们使用该元素的 `parentNode` 属性找到其父元素，并使用 `removeChild()` 方法从其父元素中删除该元素。

请注意，如果要删除的元素有多个实例，则您需要使用其他方法来选择要删除的特定实例。

相关问题

可编辑div不可删除元素

可编辑的div元素通常是用作富文本编辑器，用户可以在其中输入、插入、编辑文本和图像等内容。但是，如果您想要确保某些元素不被删除，您可以使用JavaScript来实现。

例如，您可以在div元素中插入一个不可删除的图像，如下所示：

<div contenteditable="true">
  <img src="your-image-url" contenteditable="false" />
  Type your text here...
</div>

在这个例子中，我们在可编辑的div元素中插入了一个图像，并将其contenteditable属性设置为false，这意味着用户无法编辑或删除它。

您还可以使用JavaScript来阻止用户删除某些元素，如下所示：

<div contenteditable="true" onkeydown="return checkDelete(event)">
  <p>This text cannot be deleted</p>
</div>

<script>
function checkDelete(event) {
  if (event.keyCode === 8) { // 8 is the key code for Backspace
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var node = range.commonAncestorContainer;
    if (node.nodeName === "P") { // Prevent deletion of paragraphs
      event.preventDefault();
      return false;
    }
  }
  return true;
}
</script>

在这个例子中，我们在div元素中添加了一个onkeydown事件处理程序来检查用户是否按下了Backspace键，并使用JavaScript阻止删除p元素。

总的来说，使用可编辑的div元素来创建富文本编辑器非常灵活，您可以使用JavaScript来实现自定义的行为和功能。

不要通过按钮来删除，而是通过backspace删除，当遇到不可编辑元素时，自动选中该不可编辑元素

您可以通过使用`keydown`事件监听器来实现当用户按下 Backspace 键时删除不可编辑元素并自动选中该元素。

以下是一个示例代码：

<div id="editableDiv" contentEditable="true">
  <p>This is some text.</p>
  <img src="image.jpg" alt="image" contentEditable="false">
  <p>More text here.</p>
</div>

<script>
  var editableDiv = document.getElementById("editableDiv");
  var image = editableDiv.querySelector("img[contentEditable='false']");
  if (image) {
    image.addEventListener("keydown", function(event) {
      if (event.keyCode === 8) { // backspace key
        event.preventDefault();
        this.outerHTML = this.outerHTML.replace(/<img/, "<span contentEditable='false' class='selectedImg'").replace(/\/>/, "></span>");
        var selectedImg = document.querySelector(".selectedImg");
        selectedImg.focus();
        selectedImg.classList.remove("selectedImg");
      }
    });
  }
</script>

在上面的代码中，我们首先获取具有`contentEditable`属性为`true`的`<div>`元素，并检查该元素内是否有`contentEditable`属性为`false`的`<img>`元素。如果有，我们为该元素添加一个`keydown`事件监听器，以便在用户按下 Backspace 键时执行操作。在事件处理程序中，我们首先使用`preventDefault()`方法取消默认的删除操作。接下来，我们将该元素替换为一个具有`contentEditable`属性为`false`的`<span>`元素，并添加`selectedImg`类来标识该元素。然后，我们获取该元素并将焦点设置为该元素。最后，我们将`selectedImg`类从该元素中删除，以便它可以再次被选择。

请注意，这只是一种解决方法，您可以根据您的具体情况进行修改。