Question

如何删除动态生成的特定输入文本？我试图使用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时它不起作用。任何IDeas？

Answer 1

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

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);
}

Answer 2

试试这个|的 DEMO

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); } }

Answer 3

你没有在任何地方将id设置为txtbox，只设置了name，并且你要用id删除它... 设置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>

如何删除输入类型文本？

3 个答案: