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

<ulid="del"><li><imgsrc='1.jpg'width='100'class='show_i'><imgsrc='删除图标.jpg'width=16he... <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 再次谢谢各位了。
展开
 我来答
learneroner
高粉答主

推荐于2017-10-12 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6575万
展开全部

可以使用如下两个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

百度网友a19d193
推荐于2017-10-11 · TA获得超过3446个赞
知道大有可为答主
回答量:1464
采纳率:100%
帮助的人:1445万
展开全部

楼上的解答都对,就是只删除了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时间里面追加对该函数的调用。

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
285390646
2013-05-08 · TA获得超过126个赞
知道答主
回答量:339
采纳率:0%
帮助的人:202万
展开全部
在每个删除图标所在的元素里加个属性;onclick="go(this)";
然后获得这个元素的父元素(parent)也就是这个元素所在的li ,然后获得这个li的第一个子元素(具体的代码不记得了 查下帮助文档吧 好像是有"equal '0'"),然后删除这个li下的所有子元素(childrens)
再删除这个li 最后把之前获得的那个第一个子元素返回即可
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
drink51
2013-05-08 · TA获得超过297个赞
知道小有建树答主
回答量:425
采纳率:0%
帮助的人:144万
展开全部
你是点“删除图标”删除吧,给你的删除图标这个img标签加上一个类,我就自主主张了
<img src='删除图标.jpg' width=16 height=16 class="del"/>
$(".del").click(function(){
$this = $(this);

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

}

});
以上是纯手写,如有错误告诉我,我帮你解决。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jinyc007
2013-05-08 · TA获得超过934个赞
知道小有建树答主
回答量:398
采纳率:75%
帮助的人:476万
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式