CODEWITHSUNDEEP
javascriptjqueryhtmlclone
Shivam Pandya
Shivam Pandya

Reputation: 1061

Clone Dropdown Not Working as Expected

I'm trying to do one Jquery Code, which add (clone) Dropdown and Also can remove One by One, (From bottom to top.) Here Is My Fiddle .

M Trying to do that when user click on Add then query clone dropdown and alos display "Remove Button" Beside that Cloned element so we can remove that, But at list One Element Should be Present and it can not be deleted.

My Jquery Code

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 Code

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

Upvotes: 1

Views: 1053

Answers (2)

ducdhm
ducdhm

Reputation: 1952

You should store clone of #test in some where and change id to class Like this:

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>

Workable link: http://jsfiddle.net/bobkhin/Wgz36/

Upvotes: 1

jansesun
jansesun

Reputation: 108

The code can't find the $('#test'), so it can't be cloned or be appended to the dom tree

Upvotes: 1

Related Questions