克隆下拉菜单未按预期工作

Question

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

M 当用户点击 Add 时尝试这样做，然后查询克隆下拉菜单并在该克隆元素旁边显示“删除按钮”，以便我们可以删除它，但在列表中应该存在一个元素并且无法删除。

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