javascript - 从内容可编辑div中删除？

JSFiddle

<div contenteditable="true">
    <p>This is an editable paragraph.</p>
    <figure>
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
    </figure>
 <p>This is an editable paragraph.</p>
</div>

我搞砸了一个内容可编辑的股利。

里面我有一个图像，它位于一个数字标签内。

突出显示图像并按键盘上的Delete键后，该图像将被删除，但图形标签仍保留在后面。

突出显示图像时，我还将如何删除图像旁边的图形标签？

我是否需要某种JS技巧，还是缺少明显的东西？

最佳答案

尝试使用keydown事件，setTimeout，.is()，.remove()

$("div[contenteditable]").on("keydown", function (e) {
    if (e.keyCode === 8) {
        setTimeout(function () {
            if (!$("figure img", e.target).is("*")) {
                $("figure", e.target).remove()
            }
        })
    }
})

jsfiddle demo

setTimeout为在退格keydown事件之后将img从DOM中删除提供了最小的延迟。 !$("figure img", e.target).is("*")返回布尔值，指示图形元素是否包含img元素；在选择器中将context设置为div[contenteditable]。如果Figure元素不包含img元素，则删除Figure元素。

关于javascript - 从内容可编辑div中删除？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34005557/