javascript - 删除图像并在已删除部分中显示该删除的图像

Question

我有一个 div “上传”，其中显示各种图像，并且每个图像都有一个删除选项如果单击它会隐藏图像。

我需要显示下面删除部分中的特定隐藏图像。

HTML

    <div id="upload"> 
         <a href="javascript:void(0);" onclick= remove()>  Remove  </a>
         <img src="pic1.jpg">
    </div>

    <div id="deleted">
    </div>

JS

  function remove(){
      $("upload").hide();
  }

如果我点击 div“上传”中的remove选项，那么我需要隐藏该 >image 并同时显示 div 中的image“已删除”。

Answer 1

我对您的原始代码做了一些更改。

HTML

<div id="upload">
    <a>Remove</a> <img src="pic1.jpg" />
    <a>Remove</a> <img src="pic2.jpg" />
    <!-- etc. -->
</div>

<div id="deleted"></div>

JS(使用 jQuery)

$(function() {
    $("#upload a").click(function(e) {
        $(this).next("img").appendTo($("#deleted"));
        $(this).remove();
    });
});

通过使用 jQuery，您可以将 click 事件动态绑定(bind)到 #upload 内的每个 a。然后，相对于点击的a，找到下一个img，将其附加到#deleted(使用appendTo) ，最后删除点击的a。