2 huaitianqi2016 huaitianqi2016 于 2016.04.18 17:50 提问

用js循环添加元素时出现无论点击哪个后面的删除按钮都只能删掉最后一排且只能删除一次
 $(function(){
        alert("fdsafsd");
        var fileNames = $("#fileName").val();
        var filePaths = $("#filePath").val();
        var fileNameList = new Array();
        var filePathList = new Array();
        if(fileNames.length !=0 && fileNames.length != "" && filePaths.length !=0 && filePaths.length !=""){
            fileNameList = fileNames.split(", ");
            filePathList = filePaths.split(", ");
            alert(fileNameList[0]+fileNameList[1]+fileNameList[2]);
            alert(filePathList.length);
            for(i = 0; i < fileNameList.length; i++){
                $("#i").val(i+1);
                alert($("#i").val());
                var td = document.getElementById("more");
                var br = document.createElement("br");
                var a = document.createElement("a");
                var input = document.createElement("input");
                var input1 = document.createElement("input");
                var input2 = document.createElement("input");
                var button = document.createElement("input");
                var span=document.createElement("span");
                a.id= "downloadFile" + i;
                a.innerHTML = ">>附件下载";
                a.href = "${baseURL}/" + filePathList[i];
                a.download = fileNameList[i];
                input.id = "attachmentFile" + i;
                input.disabled = "disabled";
                input.style = "background: transparent; border: none;";
                input.value = fileNameList[i];
                input.type = "text";
                input1.value = fileNameList[i];
                input1.type = "text";
                input1.name = "vo.updownFileName";
                input1.id = "updownFileName" + i;
                input2.value = filePathList[i];
                input2.type = "text";
                input2.id = "updownFilePath" + i;
                input2.name= "vo.updownFilePath";
                button.type = "button";
                button.value = "删除";


                td.appendChild(br);
                td.appendChild(a);
                td.appendChild(input);
                td.appendChild(input1);
                td.appendChild(input2);
                td.appendChild(span);
                td.appendChild(button);

                button.onclick = function()
                {
                    alert("删除");
                    td.removeChild(br);
                    td.removeChild(a);
                    td.removeChild(input);
                    td.removeChild(input1);
                    td.removeChild(input2);
                    td.removeChild(span);
                    td.removeChild(button);

                }
            }
        }
    });
    ![图片说明](https://img-ask.csdn.net/upload/201604/18/1460972877_485212.png)
    请大神帮我看看到底是哪里的原因?

3个回答

showbo
showbo   Ds   Rxr 2016.04.19 09:56
已采纳

闭包没做好,导致删除的是最后的那行的控件,删除后你再执行删掉操作dom对象不存在就会报错了,改下结构,用div扩起容器,然后通过dom关系来删除div就行了

               input2.name = "vo.updownFilePath";
                button.type = "button";
                button.value = "删除";

                ////////////////////////////
                var div=document.createElement('div')////////////
                div.appendChild(br);
                div.appendChild(a);
                div.appendChild(input);
                div.appendChild(input1);
                div.appendChild(input2);
                div.appendChild(span);
                div.appendChild(button);
                td.appendChild(div)////////////
                ////////////////////////////

                button.onclick = function () {
                    alert("删除");
                    td.removeChild(this.parentNode);//this为当前button,parentNode就是button的div容器,td直接删除这个div就行了

                }
huaitianqi2016
huaitianqi2016 非常感谢大哥的援手,完美的解决了我的问题。解释的非常好!太开心了!
2 年多之前 回复
huaitianqi2016
huaitianqi2016   2016.04.18 17:53

图片说明
图片好像看不了

小妹刚刚注册的没啥币,请帮帮忙咯!

huaitianqi2016
huaitianqi2016   2016.04.18 18:02

捉急啊!弄了一下午了都找到头绪,几乎要白了我3千青丝了。赶快来个大神救救我吧!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js点击多个同类元素 只能点击一次 必须循环出来
//css .duihuan{ display: flex; justify-content:space-between; padding: 10px; border-bottom: 1px solid #ddd; } .coupon_list{ padding: 10px; border-bottom: 2px solid yellow; } .coupon_list dl
JS闭包导致循环给按钮添加事件时总是执行最后一个
今天再做需求时有一个功能是这样的,就是有不定个的按钮,且点击按钮时都需要执行一个方法(参数不一样) 那么我很自然的就想到了,循环给每个按钮添加事件和参数就好了,由于不方便上传系统代码,下面以一个简单例子来说明. 按钮1 按钮2 按钮3 按钮4 按钮5 比如现在要实现这么一个功能,在页面上点击上面的按钮1到按钮5时分别alert出
JS的for循环总是弹出最后一个值得解决方法
首先看一下HTML内容,现在我想得到标签内的索引和内容,你也许刷刷的写下以下代码: 但是结果却不尽人意,总是弹出“6----果敢”,比较好的解决方法有以下几种: 1、使用闭包 var els = document.getElementsByTagName("li"); for (i = 0; i < els.length; i++) { var el = els[i
ListView删除item时总是删除最后一条数据!
当自己遇到这个问题的时候百度了一下,确只百度到一条类似信息,也没有给出具体方案,所以在此记录,希望帮助和我一样菜的程序员,互勉! ListView在删除item的时候,我看了一下传入的下标是正常的,并且通过测试删除的条目也是正确的,可是界面显示确总是删除最后一条,在百度多条信息之后,被告知,其实删除的item是正确的,只是界面刷新总是删除最后一条,具体的解决方案: 说是应该调用listItem
js中数组push对象,前面的值总是被最后一次的值覆盖的问题
今天一同学问了我一个问题,说他js中定义了一个数组,每次往里面push对象,结果最后一次push的对象会覆盖之前push进去的值,问我怎么解决。如果你也遇到了相同的问题,请继续看下去---------------------------------------下面是代码模拟:var data = { a:'123', b: '456', c: '789'}; var dataObj = {};//...
js数组操作-删除首项、删除尾项、头部添加项、尾部添加项
数组删除第一项,数组删除最后一项,在数组头部添加项,在数组尾部添加项,数组排序等相关操作!
jquery点击一个按钮动态生成一组能删除的input框
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;js/jquery-1
用js实现只能点击一次的按钮的功能
有时候需要用到,网页中的提交表单按钮,让用户只能点一次,以避免重复提交表单。 <a href="javascript:void(0);" onclick="this.innerHTML='提交中';this.onclick='';this.removeAttribute('href')">按钮
Js实现点击按钮创建删除div
var i = 1;   function addElement(){     var div = document.createElement('div');     div.style.backgroundColor = 'red'; div.style.fontSize = '100px'; div.innerHTML = '嘿嘿~你删我啊~你删我啊~~'; div.id = '
a标签和button按钮只允许点击一次
button方法:加上属性disabled = “disabled” 或者 disabled = “true”1>HTML里 <button id="btn" dis>确定</button> 2>Javascript里 <script> $("#btn").attr("disabled","true"); $("#btn").attr("disabled","disabled");