Question

我通过javascript动态创建图片：

var dragimg = null;
function createImage(g) {
    dragimg = document.createElement("img");
    dragimg.src = "link/to/image.png";
    dragimg.style.width = "50px";
    dragimg.style.position = "absolute";
    dragimg.style.zIndex = 100;
    $("body").prepend(dragimg);
}

创建Image后，我想通过调用此函数在某个时候将其删除：

function removeImage() {
dragimg.remove();
}

这适用于Chrome，Firefox和歌剧。但是，它在 Internet Explorer 11 中无效。

我还想指出我有一个document.onmousemove函数集，当鼠标移动时，它会操纵所创建图像的left和top属性。这适用于所有浏览器 - 但我不确定它是否与删除问题有关。

我还尝试按dragimg.parentNode.removeChild(dragimg)删除图片，但结果相同。

Answer 1

除了经典的just-use-jquery答案之外的一些事情：

http://msdn.microsoft.com/en-us/library/ie/hh772117(v=vs.85).aspx

element.remove()。这是一项实验性技术：https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove
您确定parentNode.removeChild无效，因为它适合我：http://jsfiddle.net/limdauto/wztm1dgk/

<强>之前 enter image description here

<强>后 enter image description here

Answer 2

要使用jQuery remove方法，您需要：

function removeImage() {
    $(dragimg).remove();
}

您的dragimg是一个dom元素，但$(dragimg)是一个jQuery元素。虽然jQuery prepend方法接受dom元素，但remove不接受 - 它适用于jQuery元素本身或选择器。有关jQuery remove和prepend的更多信息。

Answer 3

我不确定您调用removeImage函数的上下文，但下面的代码演示了插入图像元素并在2秒的间隔后将其删除。

注意：替换图像的路径。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var dragimg = null;
        function createImage(g) {
            dragimg = document.createElement("img");
            dragimg.src = "someimage.jpg";
            dragimg.style.width = "50px";
            dragimg.style.position = "absolute";
            dragimg.style.zIndex = 100;
            $("body").prepend(dragimg);
        }

        function removeImg() {
            dragimg.parentNode.removeChild(dragimg);
        }

        createImage(null);
        window.setInterval(removeImg, 2000);
    </script>
</body>
</html>

JS：无法在IE中删除创建的元素

3 个答案: