Question

JSFiddle

if(window.location.hash){
   doScrollToAndAnimate(window.location.hash);
}

function doScrollToAndAnimate(hash){
    //code inside of your click function currently
}

我正在搞乱一个内容可编辑的div。

在里面我有一个图像，它位于一个图形标记内。

突出显示图像并按下键盘上的删除后，图像将被删除，但数字标记会留在后面。

当我突出显示图像时，如何删除图像旁边的图形标记？

我是否需要使用某种JS技巧或者我是否遗漏了一些明显的东西？

Answer 1

尝试使用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提供了在退格键控事件事件之后从DOM中删除img的最小延迟。 !$("figure img", e.target).is("*")返回布尔值，指示图元素是否包含img元素;上下文在选择器处设置为div[contenteditable]。如果figure元素不包含img元素，则删除figure元素。

Answer 2

contenteditable在删除时遍历DOM

当您按退格键时：

<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></p>
</div>

然后

<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>
</div>

然后

<div contenteditable="true">
    <p>This is an editable paragraph.</p>
    <figure>
    </figure>
</div>

然后

<div contenteditable="true">
    <p>This is an editable paragraph.</p>
</div>

然后

<div contenteditable="true">
    <p></p>
</div>

这与HTML5中任何其他用户可编辑的“事物”的行为相同。它与如何解析DOM有关。这确实是预期的行为。

在不使用JavaScript的情况下，无法将图形与img一起删除。 guest271314提供了一个可行的解决方案。

Answer 3

您可以尝试使用此代码，但无法撤消更改

function listener(evt) {
if(evt.target.tagName.toLowerCase()=="img"){
    var parent= evt.target.parentNode
	if(parent.tagName.toLowerCase()=="figure")
         parent.parentNode.removeChild(parent)
	} 
}
   document.getElementsByTagName("figure")[0].addEventListener("DOMNodeRemoved", listener, false);

<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>

从内容可编辑div中删除？

3 个答案: