Question

我正在尝试添加一个Jquery代码，它可以添加（克隆）Dropdown，也可以逐个删除（从下到上。）这是我的 Fiddle

M当用户点击添加然后查询克隆下拉列表并尝试显示“删除按钮”时，尝试执行此操作除了克隆元素之外，我们可以删除它，但是在列表中应该存在一个元素它无法删除。

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

Answer 1

代码找不到$（'＃test'），因此无法克隆或附加到dom树

Answer 2

您应该将#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/

克隆下拉列表未按预期工作

2 个答案: