Question

我想点击＆＃34;删除图片＆＃34;链接，它删除图像。请帮帮我。

<script>
function previewFile(){

   var preview = document.querySelector('img'); 
   var file    = document.querySelector('input[type=file]').files[0];
   var reader  = new FileReader();

   reader.onloadend = function () {
       preview.src = reader.result;
   }
   if (file) {
       reader.readAsDataURL(file); 
   } else {
       preview.src = "";
   }
}

  previewFile();  

</script>

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<a href="#">remove image </a>

  </body>
</html>

Answer 1

<img id='image' src="" height="200" alt="Image preview...">
<a id='remove' href="#">remove image </a>

<script>
$(function rmv() {
    $('#remove').click(function() {
            $('#image').remove();
        }

}); 
</script>

Answer 2

如果您无法将id属性添加到img，则可以使用原始javascript将其删除 - 它假定图像直接位于锚标记之前，只允许它们之间的一个文本节点：

function removeImage(el){
    if(!el.previousSibling.tagName){//if it is textnode like newline etc. we go one back 
        var el = el.previousSibling;
    }
    if(el.previousSibling.tagName && el.previousSibling.tagName=='IMG'){
        el.previousSibling.remove();
    }
}

<img src="" height="200" alt="Image preview...">
<a href="#" onclick="removeImage(this);">remove image</a>

Answer 3

将img元素保留在div中并为此元素分配id

   <input type="file" onchange="previewFile()"><br>
<div id="imgDiv">    <img id="image1" src="" height="200" alt="Image preview..."></div>
    <a href="#">remove image </a>

      </body>
    </html>

<script>
function previewFile() {

  var d = document.getElementById('imgDiv');

  var olddiv = document.getElementById("image1");

  d.removeChild(olddiv);

}

</script>

Answer 4

<img src="" id="image" height="200" alt="Image preview...">
<a href="#" onclick="foo()">remove image </a>

JS：

function foo(){
    var image =  document.getElementById("image");
     if (image != null)
     {
          image.parentNode.removeChild(image);
     }
}

用于删除图片的{Javascript代码

4 个答案: