上一篇文章给大家提到了如何实现图片的生成，那么现在我们拥有了一个HTML页，它的布局是一个大的DIV，里面镶嵌着小的组合DIV，图片和两行介绍，我们现在要实现一个功能，就是在图片上方添加一个红色的❌，点击触发对图片的删除功能。

首先我们来看一下我们的二级DIV的样子，第一行是图片，里面放置了一个❌，下面是图片的状态以及图片的名称，我在这里就不多介绍如何实现图标的显示了，着重给大家介绍一下功能的实现。

我一开始认为点击删除是一个点击事件，所以我要绑定AJAX函数，虽然只有待审核状态的图片上方会有❌，但是每个人都可能会有很多张待审核的图片，所以我书写代码的时候认为应该是一个CLASS的图片共同触发这个点击事件。

 $("#main").on("click", ".btnDeletePicture", function () {
            //alert(tempName);
            layer.confirm('您确定要删除该图片吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    type: "GET",
                    url: layui.cache.manage + "NO1/V1/PrintScreen/DeletePicture",
                    data: { ID: tempName },
                    contentType: 'application/json',
                    success: function (data) {
                        //flag_temp = true;
                        layer.msg('删除成功', { icon: 1 });
                        document.getElementById('main').innerHTML = "";
                        selectAllPicture();
                    }, error: function (data) {
                        layer.msg('连接网络失败，请检查网络设置或联系管理员', { icon: 7 });

                    }
                })



            });
        });

代码是不是看起来很简单，就是这么简单，中间用到了LAYUI的再次确认模板，然后就实现了这个功能，逻辑也很简单，但是有一个很重要的问题，就是我们如何获取这个要删除的图片的ID呢，这不是一个小问题，但是我在生成图片的时候就已经把这个问题解决了。我在生成图片的时候设置了一个点击事件，绑定了一个点击函数，把图片的ID绑定在了这个删除按钮的点击事件中，只要我们点击这个按钮，就可以用一个变量来获取这个ID的值，然后再把这个变量的值传到后端去删除这张图片。

代码如下：

"div id='tempPicture'><input class='btnDeletePicture' type='button' value='×' title='点击删除'onclick='deletepictureID(\""+ data[i].id+"\")'/> </div> "

这是用FOR循环生成的绑定在删除按钮中的喊出，把图片的ID绑定在了deletepicture（）方法的参数中，一旦点击这个删除按钮，就会执行deletepicture（）的方法来获取图片的ID，哈哈，是不是很棒。

然而，我却失败了，一直都无法正确删除，经过我的检查，才发现，原来绑定在deletepicture()函数中的参数，以JS的逻辑，直接理解成为了数字，而图片对应的ID位数太长，因此失去了ID的精度，我在从后端查到的图片ID：data[i].id的两端多加两个双引号，让JS以字符串的方式去理解它们就没有任何的问题了。

大家一定要记的，JS会以默认的数值类型去理解数字，假如不希望数据失去精度，一定要在数字两端加上双引号。