Javascript添加/删除唯一克隆的div

Question

I have a dropdown that I want to be cloned and have a unique id. I managed to do it and it works on my website.

I am trying to make a "x" button to removed added clones and I can't get it to work.

The javascript:

var counter = 1;
function addInput(divName, template){
    if (counter == 5)  {
        document.getElementById("add_more_text").remove();
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = document.getElementById(divName).innerHTML;
        document.getElementById(template).appendChild(newdiv);
        counter++;
    }

    var selectElements = document.querySelectorAll('select');
    for (var i = 0; i < selectElements.length; i++){
        selectElements[i].id = 'id-' + i;
        selectElements[i].name = 'category' + i;
    }
}
function removeInput(divName, template){
    document.getElementById(template).removeChild(divName);
    counter--;
}

The html:

<div id="template">
    <select name="category0"><option>hi</option></select> 
    <a href="javascript:void(0)" onClick="removeInput('template', 'add_more');">x</a>                                       
</div>
<div id="add_more"></div>
<a href="javascript:void(0)" onClick="addInput('template', 'add_more');" id="add_more_text">+ Add more</a>

DEMO

Any help is much appreciated!

Answer 1

Simpler to modify remove function as follows:

function removeInput(obj) {
    if (obj.parentNode.className == 'added') {
        obj.parentNode.parentNode.removeChild(obj.parentNode);
        counter--;
    }
}

And have a link in template like this:

<a href="javascript:void(0)" onClick="removeInput(this);">x</a> 

Class added is to distinguish new clones that can be removed:

newdiv.className = 'added';

Demo: http://jsfiddle.net/rjXXa/2/

Answer 2

in your onClick property

<a href="javascript:void(0)" onClick="removeInput('template', 'add_more');">x</a>

you are passing template and add_more

And in the handler function

function removeInput(divName, template){

the parameters are in a different order, so divName will contain 'template' and template will contain 'add_more' . Even if you fix this,

document.getElementById(template).removeChild(divName); // will throw error

because the div#add_more is not a child of div#template .

For fixing this, you need to pass a reference to the clicked element, like the following

<a href="javascript:void(0)" onClick="removeInput(this);">x</a> 

and in your function

function removeInput(anchor){ 
 var clone = anchor.parentNode; // div containing the anchor
 if(clone.id!='template'){ // make sure we're not removing the original template 
  clone.parentNode.removeChild(clone);
  counter--;
 }
}

as in this Fiddle

Update

It's better to remove the add more option from display using css and make it visible later than removing/appending it in DOM, as follows

change the following in addInput() function

if (counter > 4)  {
    document.getElementById("add_more_text").style.display='none';
}

and in removeInput() function add

 if (counter < 5)  {
    document.getElementById("add_more_text").style.display='block';
 }

as in this Fiddle