javascript(JQuery)元素操作

html代码如下：

<div >
    <ul>
        <li style="float:left;90px;">
            <img src="/UpLoadFile/6ac74c39d3811db3ccff1324dd842a83.jpg">
            <a href="javascript:void(0);">删除</a>
        </li>
        <li style="float:left;90px;">
            <img src="/UpLoadFile/52c7b053aa14582adcf5862f1c54a317.jpg">
            <a href="javascript:void(0);">删除</a>
        </li>
     </ul>
</div>

效果图为：

如果实现点击删除后，可以把图片元素移除javascript代码如下：

<script>
    $("#picK li a").click(function(){
        //当点击“删除”后，li元素消失
        $(this).parent().remove();
        //获取删除的图片链接
        var img=$(this).prev().attr("src");
        //截取图片名称
        var img=img.substr(-47);
        //获取隐藏域的图片集字符串
        var allimg=$("#pics").val();
        //把图片集字符串拆分成数组
        var arrimg=allimg.split(";");
        //从数组中根据图片名称删除数组元素
        arrimg.splice($.inArray(img,arrimg),1);
        //合并数组元素为字符串
        arrimg=arrimg.join(";");
        //把新的图片集字符串保存到隐藏域
        $("#pics").val(arrimg);
    });
</script>

javascript(JQuery)元素操作

相关推荐