how to remove an object by button?

Question

i built two buttons with this values("+" and "-") when i click on "+" it creates a text and combo box, i wanna know how to remove them with "-" button?(by only JavaScript)

here's the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>create and delete</title>
<script type="text/javascript">
/*this function creates text box and combo box*/
function cre()
    {var t=document.createElement('select');
    var form=document.getElementById('theForm');
    var label = document.createElement('label');
    var textbox = document.createElement('input');
    form.appendChild(t);
    form.appendChild(textbox);}
function del()
    /*{delete t,form,label,textbox;}*/
</script>
</head>
<body>
    <form id='theForm'>
        <input type="button" value="+" onclick="cre()" />
        <input type="button" value="-" onclick="del()" />
    </form>
</body>
</html>

https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild — Matt Ball, May 08 '13 at 05:40
take a look [here](http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id) — quickshiftin, May 08 '13 at 05:41
@hamidreza,Try to study jquery, You can do these things with simple steps — Shijin TR, May 08 '13 at 06:35
@shin my friend(which is teaching me this stuff)said you should learn js,html and css well at first,then go after jqery and php and... — hamid reza, May 08 '13 at 06:42

Prasath K · Accepted Answer · 2013-05-08T06:23:12.513

1

    function del()
        {
        var form=document.getElementById('theForm');
        var t = form.getElementsByTagName('select');
        var textbox = form.getElementsByTagName('input');
        if(t != 'undefined' && textbox != 'undefined')
        {
            form.removeChild(t[t.length-1]);
            form.removeChild(textbox[textbox.length-1]);
        }
        }

Fiddle for your reference

edited May 08 '13 at 06:23

answered May 08 '13 at 05:41

Prasath K

4,950
7
23
35

This only works with the last object. Repeated clicks do nothing. – John Dvorak May 08 '13 at 05:45
hi and thanks for the answer,it worked but it only delete one of them,for example when i click "+" 3times and i wanna remove them all it only delete one of them – hamid reza May 08 '13 at 05:46
Yupp i just said him the use of removeChild if he wants to remove other objects he should create id for the objects and moreover try , catch and other conditions.. – Prasath K May 08 '13 at 05:47
@hamidreza sorry i made a small mistake ... Check now – Prasath K May 08 '13 at 06:00
@anoooooooooooooooop thank you .. I was little busy so couldn't figure it out – Prasath K May 08 '13 at 06:06
1

@PrasathK, its my pleasure bro :) – Anoop Joshi P May 08 '13 at 06:08
1

@PrasathK and anoooooooooooooooop thank you both,yeah it worked – hamid reza May 08 '13 at 06:26
It's false : t != 'undefined' && textbox != 'undefined' – EpokK May 08 '13 at 06:32
You must use typeof(var) !== 'undefined' noob – EpokK May 08 '13 at 12:09

EpokK · Answer 2 · 2013-05-08T07:05:11.340

My solution :

cre = function() {
    var form = document.getElementById('theForm'),
        div = document.createElement('div'),
        t = document.createElement('select'),
        label = document.createElement('label'),
        textbox = document.createElement('input');

    div.className = 'divContainer';
    div.appendChild(t);
    div.appendChild(label);
    div.appendChild(textbox);
    form.appendChild(div);
}

/*{delete t,form,label,textbox;}*/
delForm = function() {
    var form = document.getElementById('theForm');
    form.parentNode.removeChild(form);
}

del = function() {
    var containers = document.getElementsByClassName('divContainer');
    for(var i = 0; i < containers.length; i++) {
         if(typeof(containers[i]) === 'object') {
             containers[i].parentNode.removeChild(containers[i]);
         }
     }
}

JSFiddle : http://jsfiddle.net/j6Fxc/27/

he is not creating forms on each '+' click – Prasath K May 08 '13 at 05:56 — Prasath K, May 08 '13 at 05:56

how to remove an object by button?

2 Answers2