Question

如何用JQuery 实现对应删除标签，返回数据！

<ul id="del">
<li>
<img src='1.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 />
</li>
<li>
<img src='2.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 />
</li>
<li>
<img src='3.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 />
</li>
</ul>

现在是有无限数量的li标签，每一个标签中一个固定的"删除图标.jpg"图片！和另外一个图片，也就类似代码中的1.jpg、2.jpg、3.jpg
请问怎么使用JQuery 实现：当点击对应一个“删除图标时”，清空该li标签所有元素，连同li也去掉！并且返回之前删除了哪一个图？

比如点击了第一个“删除图标”，返回1.jpg 再次谢谢各位了。

Answer 1

可以使用如下两个jquery方法来实现：

$(selector).remove();   // 除被选元素，包括所有文本和子节点
$(selector).attr();     // 返回被选元素的属性值。

实例演示：点击图标删除li，同时获取被删除图片的信息

1. 创建Html元素

   <div class="box">
   	<span>点击删除图标删除li，同时获取被删除图片的信息：</span><br>
   	<div class="content">
   		<ul id="del">
   			<li>
   			<img src='cloudy.png' class='show_i' >
   			<img src='delete.png' class="del_i"/>
   			</li>
   			<li>
   			<img src='photo.png' class='show_i' >
   			<img src='delete.png' class="del_i"/>
   			</li>
   			<li>
   			<img src='alarm.png' class='show_i' >
   			<img src='delete.png' class="del_i"/>
   			</li>
   		</ul>
   	</div>
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   li{list-style: none;}
   img.show_i{width:100px;}
   img.del_i{width:20px;cursor:pointer;}

3. 编写jquery代码

   $(function(){ 
   	$("ul#del img.del_i").click(function() {
   		var name = $(this).siblings('img').attr("src");  // 被删除图片名称
   		$(this).parent("li").remove();                   // 删除父元素li
   		alert(name);
   	});
   });

4. 观察效果

• 初始样式

  

• 点击删除第二个li

  

Answer 2

楼上的解答都对，就是只删除了Img，没有把li一起删掉...

<ul id="del">
<li>
<img src='1.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
<li>
<img src='2.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
<li>
<img src='3.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
</ul>
<script type="text/javascript">
$(function(){
    $('img.delImg').click(function(){
        if(confirm('确定删除吗?')){
            var delSrc = $(this).prev().attr('src');
            alert(delSrc);//如果你需要对该src做其他操作修改此处
            $(this).parents('li:first').remove();
        }
    });
});
</script>

追问

你好！谢谢你的回答。请问

假如页面中会存在一个隐藏域：

里面value值为上面的所有图片值得用 "," ，隔开的。

请问点击上面那个删除的时候怎么 也同时对这个隐藏域进行删除对应的图片呢？

比如我点击了第一个”删除图标“ 那么imgs 的 value变成"2.jpg,3.jpg".

追答

<ul id="del">
<li>
<img src='1.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
<li>
<img src='2.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
<li>
<img src='3.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="delImg" />
</li>
</ul>
<script type="text/javascript">
$(function(){
    $('img.delImg').click(function(){
        if(confirm('确定删除吗?')){
            var delSrc = $(this).prev().attr('src');
            alert(delSrc);//如果你需要对该src做其他操作修改此处
            $(this).parents('li:first').remove();
            resetHiddenElementValue();
        }
    });
});
function resetHiddenElementValue() {
    var srcs = [];
    $('#del img.show_i').each(function(){
        srcs.push($(this).attr('src'));
    });
    $('#imgs').val(srcs.join(','));
}
</script>

加了新函数，同时在click时间里面追加对该函数的调用。

追问

你好！你增加的函数好像是增加一个图片路径进去。

是已经存在的？不需要增加，我是请问怎么 去删除里面对应的！不需要增加的 呵呵！谢谢

只需要删除对应的即可，麻烦你了！

追答

我们应该关心结果，不是吗？你的目的是imgs的value里面是现在存在的那些图片的src组合的值，对不对？那个新函数就是遍历所有符合要求的img然后把src组合起来放入imgs.value中。这个结果是符合你预期的。

至于你考虑的哪个删除了就去掉哪个，呵呵，说起来容易，但是实际上字符串操作是非常复杂的，而且万一你一个图片叫做1.jpg,另一个叫做1.jpg.jpg，那字符串操作就更容易出问题了，对吗？所以简单直接的手段就是重新计算值，然后把原始值覆盖就好了。

你明白我的意思么？

另外，我猜你维护这个的目的是在提交表单的时候告诉后台哪些图片还健在，因此你事实上完全可以在表单提交前使用我新增的方法为其更新一次值就可以了，而不必随时更新

追问

非常谢谢您的回答。呵呵！是的 您的逻辑很到位。我早起是想通过”，“来进行删除增加。谢谢你的回答。采用您的思路和代码。再次感谢

追答

不客气：）

Answer 3

在每个删除图标所在的元素里加个属性;onclick="go(this)";
然后获得这个元素的父元素（parent）也就是这个元素所在的li ，然后获得这个li的第一个子元素（具体的代码不记得了 查下帮助文档吧 好像是有"equal '0'"），然后删除这个li下的所有子元素（childrens）
再删除这个li 最后把之前获得的那个第一个子元素返回即可

Answer 4

你是点“删除图标”删除吧，给你的删除图标这个img标签加上一个类，我就自主主张了
<img src='删除图标.jpg' width=16 height=16 class="del"/>
$(".del").click(function(){
$this = $(this);

if(confirm("真的要删除吗？")){
$this.parent().remove();

}

});
以上是纯手写，如有错误告诉我，我帮你解决。

Answer 5

<ul>
<li>
<img src='3.jpg' width='100' class='show_i' >
<img src='删除图标.jpg' width=16 height=16 class="del"/>
</li>
</ul
<script>
$(function(){
$('.del').click(function(){
$this=$(this);
$ret=$this.siblings('.show_i').attr('src');
$this.parent().remove();
return ret;
});
});
</script>