CODEWITHSUNDEEP
javascripthtml
user2901740
user2901740

Reputation: 1571

How to delete an input type text?

How to delete the specific input text that is dynamically generated? I tried to used the remove() but not working. any idea? 

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>

it does not work when I add the setAttribute onlick. Any IDeas?

Upvotes: 1

Views: 4120

Answers (3)

Voonic
Voonic

Reputation: 4775

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

Upvotes: 2

Deepika Janiyani
Deepika Janiyani

Reputation: 1477

You have not set id as txtbox anywhere, only name is set, and you are removing it with id... set id 

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

Moreover you are creating many text input and buttons, so id should be unique, and the delete button should also get removed.

Try code below

<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>

Upvotes: 0

fredtma
fredtma

Reputation: 1053

Two things you need to change in the script.

1) The input that you have created does not have ID attribute added to it.

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

Only then can you do 

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

2) The button you have created need to change to the following. Note that remove() is not a javascript function, it's jquery

btns.onclick=function(){
    var elem = document.getElementById("txtbox");
    elem.parentNode.removeChild(elem);
}

Upvotes: 3

Related Questions