克隆下拉工作不正常

我试图做一个jQuery代码，里面加（克隆）下拉，也可以删除一个接一个，（从下到上。）这里是我的Fiddle 。克隆下拉工作不正常

想要做的是，当上用户点击添加然后查询克隆下拉和阿洛斯显示“删除按钮”在那旁边克隆的元素，所以我们可以删除，但在列表中的一个元素应该存在，它不能删除。

我的jQuery代码

var countClone = 0; 
$('#btnDel1Clon').click(function(){ 
    //alert(countClone); 
    if (countClone == "1") 
    { 
     $('#btnDel1Clon').css('display', 'none'); 
     $('#test').remove(); 
    } 
    else 
    { 
     $('#test').remove(); 
     countClone -= 1; 
    } 
}); 
$('#btnAdd1Clone').click(function(){ 
    countClone += 1; 
    $('#test').clone().appendTo('#input11'); 
    $('#btnDel1Clon').attr('style', 'display:"";'); 
});

HTML代码

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td> 
      <div id="input11" class="clonedInput1 " style="margin-bottom: 15px!important; width:247px; float:none;"> 
       <div class="formRight" ><select><option>Value</option><option>Value</option><option>Value</option><option>Value</option><option>Value</option> 
       </select> 
       </div> 
      </div> 
     </td> 
     <td valign="bottom" style="padding-bottom:15px;" class="btnspicalbtn"> 
      <div style="float:left;"> 
       <span class="floatleft"> 
        <input id="btnAdd1Clone" type="button" value="Add" class="iconadd1" title="Add More"/> 
       </span> 
       <span class="floatleft brdleftinput" style="margin-left:8px;"> 
        <input id="btnDel1Clon" type="button" value="Remove" style="display:none" class="iconremove" title="Remove" /> 
       </span> 
      </div> 
     </td> 
     </tr> 
    </table>

来源

2014-02-12 Shivam Pandya

您应该在某些地方存储#test的克隆并更改id到class像这样：

JS：

var cloneTest = $('.test').clone(); 
var countClone = 0; 

$('#btnDel1Clon').click(function(){ 
    //alert(countClone); 
    var lastTest = $('.test').last(); 
    if (countClone == "1") 
    { 
     $('#btnDel1Clon').css('display', 'none'); 
     lastTest .remove(); 
    } 
    else 
    { 
     lastTest.remove(); 
     countClone -= 1; 
    } 
}); 
$('#btnAdd1Clone').click(function(){ 
    countClone += 1; 
    cloneTest.clone().appendTo('#input11'); 
    $('#btnDel1Clon').attr('style', 'display:"";'); 
});

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td> 
      <div id="input11" class="clonedInput1 " style="margin-bottom: 15px!important; width:247px; float:none;"> 
       <div class="formRight"> 
        <select class="test"> 
         <option>Value</option> 
         <option>Value</option> 
         <option>Value</option> 
         <option>Value</option> 
         <option>Value</option> 
        </select> 
       </div> 
      </div> 
     </td> 
     <td valign="bottom" style="padding-bottom:15px;" class="btnspicalbtn"> 
      <div style="float:left;"> 
       <span class="floatleft"> 
        <input id="btnAdd1Clone" type="button" value="Add" class="iconadd1" title="Add More" /> 
       </span> 
       <span class="floatleft brdleftinput" style="margin-left:8px;"> 
        <input id="btnDel1Clon" type="button" value="Remove" style="display:none" class="iconremove" title="Remove" /> 
       </span> 
      </div> 
     </td> 
    </tr> 
</table>

可行链接：http://jsfiddle.net/bobkhin/Wgz36/

来源

2014-02-12 12:28:02 ducdhm

它应该删除最后添加的dorp首先。目前它首先删除 –

的代码无法找到$（ '＃测试'），所以它不能被克隆或被附加到dom树

来源

2014-02-12 12:15:13 jansesun

小提琴更新http://jsfiddle.net/jtJ9L/2/ –

如果您的计数器从1开始，您的代码可以按照您的预期工作。 – jansesun

克隆下拉工作不正常

回答

相关问题