0

嗨，谁能帮助我

得到这个表格，当我选择图像时会渲染图像，我希望每个图像都有一个删除按钮，以防选择了错误的图像。

不知道该怎么做。

任何帮助、评论、链接、建议都可以。提前致谢。

这是我的演示

//I just copy paste the code inside my demo.
4

2 回答 2

0

只需清除#images_preview 中的内容即可。

function clearContent()
{
   document.getElementById('images_preview').innerHTML="";
}

已编辑

在渲染图像后添加以下代码（在 document.getElementById('images_preview').appendChild(thumb); 之后）

var element = document.createElement("input"); 
 element.setAttribute("type", "button");
 element.setAttribute("value", "clear");
 element.addEventListener('click', clearContent, false);
 document.getElementById('images_preview').appendChild(element);
于 2013-07-08T10:18:07.460 回答
0

在此代码中，如果您单击图像，确认框会询问您是否要删除图像。

如果您接受，则将其从 DOM 中删除。

在两行之间复制 addEventListener//your code

thumb.setAttribute('src',e.target.result);// your code

thumb.addEventListener('click',function(){
 if(confirm('delete?')){
  this.parentNode.removeChild(this)
 }
},false);

document.getElementById('images_preview').appendChild(thumb); // your code

如果您不需要为其他目的选择图像，这是最快的方法。

您还可以使用 (this) 直接与图像交互；

要创建一个漂亮的按钮效果，我只需在悬停时添加 css 样式。

#images_preview>img:hover:after{
 //here u add a nice delete icon
}

如果您需要更多按钮并且可以选择每个图像，我会将图像作为背景放在左侧浮动 div 中，并在 div 内放置您需要的不同按钮。

于 2013-07-08T10:27:10.927 回答