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

スクリプトで変更する必要がある 2 つの点。

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()"/>

ジャバスクリプト

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 に答える