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

Question

我正在尝试做一个 Jquery 代码，它添加(克隆)下拉列表并且还可以一个一个地删除，(从下到上。)这是我的 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 的克隆存储在某个地方并将 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/