1

如何删除动态生成的特定输入文本？我尝试使用 remove() 但不工作。任何想法？

var txtLoop = 1;
function add(type) {
    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "typhere");
    element.setAttribute("name", "txtbox" +txtLoop);
    txtLoop++;

    var btns = document.createElement("input");


    btns.setAttribute("type", "button" );
    btns.setAttribute("value", "delete");
    btns.setAttribute("name", "dlete");

    //This part is wrong, hmmm..
    btns.setAttribute("onclick", var elem = document.getElementById("txtbox");
    elem.remove(); );

    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).

    foo.appendChild(element);
    foo.appendChild(btns);
}

<INPUT type="button" value="Add" onclick="add(document.forms[0].value); "/>

<span id="fooBar"><br/></span>

当我添加 setAttribute onlick 时它不起作用。有任何想法吗？

4

3 回答 3

3

您需要在脚本中更改两件事。

1）您创建的输入没有添加 ID 属性。

element.setAttribute("id", "txtbox");

只有这样你才能做到

var elem = document.getElementById("txtbox");

2）您创建的按钮需要更改为以下内容。请注意，这remove()不是 javascript 函数，它是 jquery

btns.onclick=function(){
    var elem = document.getElementById("txtbox");
    elem.parentNode.removeChild(elem);
}
于 2013-11-05T08:43:28.550 回答
2

试试这个| 演示

HTML<INPUT type="button" value="Add" onclick="add()"/>

JAVASCRIPT

var txtLoop = 1;
function add(){

        //Create an input type dynamically.
        var element = document.createElement("input");

        //Assign different attributes to the element.
        element.setAttribute("type", "text");
        element.setAttribute("value", "typhere");
        element.setAttribute("name", "txtbox" +txtLoop);
        txtLoop++;

        var btns = document.createElement("input");
        btns.setAttribute("type", "button" );
        btns.setAttribute("value", "delete");
        btns.setAttribute("name", "dlete");
        var foo = document.getElementById("fooBar");

        //Append the element in page (in span).

        foo.appendChild(element);
        foo.appendChild(btns);

        btns.onclick = function()
        {  
            element.parentNode.removeChild(element);
            btns.parentNode.removeChild(btns);
        }
 }
于 2013-11-05T09:18:43.070 回答
0

您没有在任何地方将 id 设置为 txtbox，只设置了名称，并且您正在使用 id 删除它... set id 

element.setAttribute("id", "txtbox");

此外，您正在创建许多文本输入和按钮，因此 id 应该是唯一的，并且删除按钮也应该被删除。

试试下面的代码

<html>
<head>
    <script type="text/javascript">
    var txtLoop = 1;
    function add() {


            //Create an input type dynamically.
            var element = document.createElement("input");

            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", "typhere");
            element.setAttribute("name", "txtbox" +txtLoop);
            element.setAttribute("id", "txtbox" + txtLoop);


            var btns = document.createElement("input");
            btns.setAttribute("type", "button" );
            btns.setAttribute("value", "delete");
            btns.setAttribute("name", "dlete");
            btns.setAttribute("id", "dlete" + txtLoop);


            //var elem = document.getElementById("txtbox" + txtLoop);
            //var elem = "txtbox" + txtLoop;
            btns.setAttribute("onclick",'Javascript:removechild('+txtLoop+');');
            //btns.onclick = removechild(txtLoop);

            var foo = document.getElementById("fooBar");

            //Append the element in page (in span).

            foo.appendChild(element);
            foo.appendChild(btns);
            txtLoop++;

        }

    function removechild(ino){
        var foo = document.getElementById("fooBar");

        var elem = document.getElementById("txtbox" + ino);
        foo.removeChild(elem);

        var elem = document.getElementById("dlete" + ino);
        foo.removeChild(elem);
    }
</script>
</head>
<body>
<INPUT type="button" value="Add" onclick="add(); "/>

 <span id="fooBar"><br/></span>

</html>
于 2013-11-05T08:34:57.573 回答