Question

我有一个我想要克隆的下拉列表，并且有一个唯一的ID。我设法做到了，它可以在我的网站上运行。

我正在尝试制作一个＆＃34; x＆＃34;按钮删除添加的克隆，我无法让它工作。

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

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

非常感谢任何帮助！

Answer 1

更简单的修改删除功能如下：

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

在模板中有一个链接：

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

类added用于区分可以删除的新克隆：

newdiv.className = 'added';

演示：http://jsfiddle.net/rjXXa/2/

Answer 2

属性中的

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

您正在传递template和add_more

在处理程序函数

中

function removeInput(divName, template){

参数的顺序不同，因此divName将包含'template'，template将包含'add_more'。即使你解决了这个问题，

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

因为div#add_more不是div#template的孩子。

要解决此问题，您需要传递对被点击元素的引用，如下所示

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

并在您的函数中

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

，如此Fiddle

<强>更新

最好使用css从显示中删除add more选项，并使其在DOM中删除/附加后可见，如下所示

更改addInput()功能

中的以下内容

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

并在removeInput()函数中添加

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

，如此Fiddle

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

2 个答案:

演示：http://jsfiddle.net/rjXXa/2/