Jquery clone div添加新删除按钮

Question

这是html代码

<div id="input1" class="clonedInput">
<div class="col-sm-3 text_flied">
    <div class="col-sm-4 no-padding">
        <input type="" class="form-control banwidth frmfld" value=""   name="from_width[1]" id="widthid">
    </div>
    <div class="col-sm-1 text_middle no-padding">
    <p>X</p>
    </div>
    <div class="col-sm-4 no-padding">
        <input type="" class="form-control banheight frmfld" value=""   name="from_height[1]" id="heightid">
    </div>
    <div class="col-sm-3 no-padding arrow_text">
    <img src="/futurebanner/dev/themes/onlinetest/images_front/down_arrow1.png" class="arrow_text ban_size">
    </div>
    <div class="size-drop-center"  style="display:none;">
<ul>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="88" banheight="31" ><span>88</span><em>x</em><span>31</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="60" ><span>120</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="90"><span>120</span><em>x</em><span>90</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="240"><span>120</span><em>x</em><span>240</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="125" banheight="125"><span>125</span><em>x</em><span>125</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="160" banheight="600"><span>160</span><em>x</em><span>600</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="234" banheight="60"  ><span>234</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="468" banheight="60"  ><span>468</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="728" banheight="90"  ><span>728</span><em>x</em><span>90</span></a></li>
<li class="custom"><a href="javascrtipt:void(0)" class="ban_text" banwidth="" banheight=""  >custom size</a></li>
</ul>
</div>

    </div>

    <div class="col-sm-7 no-padding-right">
    <div class="text_checkbox">
    <div class="col-sm-4 no-padding">
    <div class="checkbox" style="float:left;">
        <label>
                  <input type="checkbox" class="chk-animated frmfld animclass" name="is_animated[1]" value="15">+$15Animated
        </label>
      </div>
      </div>
      <div class="col-sm-4 no-padding-right">

    <div class="checkbox" style="float:left;">
        <label>
                 <input type="checkbox" class="chk-animated frmfld timclass" name="is_timings[1]" value="10">+$10 /24H 
        </label>
      </div>
      </div>
      <div class="col-sm-4 no-padding">
    <div class="checkbox" style="float:left;">
        <label>
                  <input type="checkbox" class="chk-animated frmfld  psdclass" name="is_psd[1]" value="5">+$5 .PSD
        </label>
      </div>
      </div>    
    <div class="clearfix"></div>
    </div>
    </div>
    <div class="col-sm-1 no-padding-right">
    <div class="text_total pull-left">
    $<span class="tot" id="res_tot1">0</span>
    </div>
    </div>
    <div class="clearfix">&nbsp;</div>
    </div><button type="button" class="btn btn-default" id="btnAdd">+ ADD BANNER</button>

这是jquery代码

 $('#btnAdd').on('click',function() {
                    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have

                    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
                    $("#num_banner").html(newNum);
                    // replace the input name as input1, input2
                    var newaddress= $('.clonedInput').last().clone(true).attr('id', 'input' + newNum);

                    newaddress.find('.frmfld').each(function() {
                        this.name= this.name.replace('['+num+']', '['+newNum+']');
                    });

                    newaddress.find('.tot').each(function() {
                        this.id= this.id.replace(num, newNum);
                    });


                    //$('#input' + num).after(newaddress);
                    $('.clonedInput').last().after(newaddress);

                    findtotalamount();
                    calc_deliverydate();

            });

当我点击添加横幅按钮时，它会克隆＆＃34; clonedInput＆＃34; div类。最初，我们不需要包含删除按钮。但是在单击添加横幅后，我需要在克隆的div中添加以下删除按钮代码

<div class="pull-left del-area"><a href="#" id="del_banner"><i class="fa fa-times-circle"></i></a>
</div>

如何仅在克隆的div中添加上述行？

Answer 1

这是适合您的工作解决方案。 DEMO

我已将myClass添加到X div类，但您可以将现有类用于相同的目的，这取决于您是否将这些类用于其他内容。

Answer 2

您可以在原始.clonedInput的标记中添加按钮，并使用css可以隐藏按钮，因为您不想删除第一个（原始）div。如您所见，我将id="del_banner"更改为class="del_banner"，因此您最终无法获得重复的ID。而且你真的不需要这些ID。

<div class="pull-left del-area"><a href="#" class="del_banner"><i class="fa fa-times-circle"></i></a>

在添加回调中，您可以添加以下行，该行将显示所有已复制的.del_banner元素，但不会显示:first。

$('div.del-area').not(':first').show();

然后您可以向a.del_banner添加点击事件监听器，如下所示：

$(document).on('click', 'a.del_banner', function(e) {
  e.preventDefault();
  $(this).closest('.cInput').remove();
});

查看演示;有用！ ：）

＆＃13;

＆＃13;

$('#btnAdd').on('click',function() {
                    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have

                    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
                    $("#num_banner").html(newNum);
                    // replace the input name as input1, input2
                    var newaddress= $('.clonedInput').last().clone(true).attr('id', 'input' + newNum);

                    newaddress.find('.frmfld').each(function() {
                        this.name= this.name.replace('['+num+']', '['+newNum+']');
                    });

                    newaddress.find('.tot').each(function() {
                        this.id= this.id.replace(num, newNum);
                    });


                    //$('#input' + num).after(newaddress);
                    $('.clonedInput').last().after(newaddress);
                    
                    $('div.del-area').not(':first').show();
  
                    findtotalamount();
                    calc_deliverydate();

            });

$(document).on('click', 'a.del_banner', function(e) {
  e.preventDefault();
  $(this).closest('.cInput').remove();
});

＆＃13;

div.del-area {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="input1" class="clonedInput cInput">
<div class="col-sm-3 text_flied">
    <div class="col-sm-4 no-padding">
        <div class="pull-left del-area"><a href="#" class="del_banner">DEL<i class="fa fa-times-circle"></i></a>
</div>
        <input type="" class="form-control banwidth frmfld" value=""   name="from_width[1]" id="widthid">
    </div>
    <div class="col-sm-1 text_middle no-padding">
    <p>X</p>
    </div>
    <div class="col-sm-4 no-padding">
        <input type="" class="form-control banheight frmfld" value=""   name="from_height[1]" id="heightid">
    </div>
    <div class="col-sm-3 no-padding arrow_text">
    <img src="/futurebanner/dev/themes/onlinetest/images_front/down_arrow1.png" class="arrow_text ban_size">
    </div>
    <div class="size-drop-center"  style="display:none;">
<ul>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="88" banheight="31" ><span>88</span><em>x</em><span>31</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="60" ><span>120</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="90"><span>120</span><em>x</em><span>90</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="120" banheight="240"><span>120</span><em>x</em><span>240</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="125" banheight="125"><span>125</span><em>x</em><span>125</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="160" banheight="600"><span>160</span><em>x</em><span>600</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="234" banheight="60"  ><span>234</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="468" banheight="60"  ><span>468</span><em>x</em><span>60</span></a></li>
<li><a href="javascrtipt:void(0)" class="ban_text" banwidth="728" banheight="90"  ><span>728</span><em>x</em><span>90</span></a></li>
<li class="custom"><a href="javascrtipt:void(0)" class="ban_text" banwidth="" banheight=""  >custom size</a></li>
</ul>
</div>

    </div>

    <div class="col-sm-7 no-padding-right">
    <div class="text_checkbox">
    <div class="col-sm-4 no-padding">
    <div class="checkbox" style="float:left;">
        <label>
                  <input type="checkbox" class="chk-animated frmfld animclass" name="is_animated[1]" value="15">+$15Animated
        </label>
      </div>
      </div>
      <div class="col-sm-4 no-padding-right">

    <div class="checkbox" style="float:left;">
        <label>
                 <input type="checkbox" class="chk-animated frmfld timclass" name="is_timings[1]" value="10">+$10 /24H 
        </label>
      </div>
      </div>
      <div class="col-sm-4 no-padding">
    <div class="checkbox" style="float:left;">
        <label>
                  <input type="checkbox" class="chk-animated frmfld  psdclass" name="is_psd[1]" value="5">+$5 .PSD
        </label>
      </div>
      </div>    
    <div class="clearfix"></div>
    </div>
    </div>
    <div class="col-sm-1 no-padding-right">
    <div class="text_total pull-left">
    $<span class="tot" id="res_tot1">0</span>
    </div>
    </div>
    <div class="clearfix">&nbsp;</div>
    </div><button type="button" class="btn btn-default" id="btnAdd">+ ADD BANNER</button>

＆＃13;

＆＃13;

＆＃13;