克隆字段上的“添加-删除”按钮

Add Remove Button on Cloned Field

本文关键字：删除 按钮 添加 字段      更新时间：2023-09-26

大家好，我需要帮助在克隆发生后添加Remove按钮。"删除"按钮应删除克隆的字段。任何建议都将不胜感激。Bootply版本-http://www.bootply.com/LiqkgWUFF6

提前谢谢。

var template = $('#line_1').clone();
$('#cloneButton').click(function () {
    var rowId = $('.row').length + 1;
    var klon = template.clone();          
    klon.attr('id', 'line_' + rowId)
        .insertAfter($('.row').last())
        .find('option')
        .each(function () {
            $(this).attr('id', $(this).attr('id').replace(/_('d*)$/, "_"+rowId));
        })                   
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row" id="line_1">
<div class="form-group col-md-2">
                                <label class="control-label">State</label>
                                        <select class="form-control">
  <option id="Select_1">Select State</option>
  <option id="Selangor_1">Selangor</option>
  <option id="KualaLumpur_1">Kuala Lumpur</option>
  <option id="Malacca_1">Malacca</option>
  <option id="Perak_1">Perak</option>
<option id="Kedah_1">Kedah</option>
</select>
                            </div>
    </div>
<a id="cloneButton" class="btn btn-primary">Add State</a>

试试这个：

var template = $('#line_1').clone();
$('#cloneButton').click(function () {
    var rowId = $('.row').length + 1;
    var klon = template.clone();   
    console.log(klon)       
    klon.attr('id', 'line_' + rowId)
        .insertAfter($('.row').last())
        .find('option')
        .each(function () {
            $(this).attr('id', $(this).attr('id').replace(/_('d*)$/, "_"+rowId));
        })    
        $("#line_" + rowId).append("<a href='javascript:void(0);' class='remove'>delete</a>")               
});
$(document).on("click", ".remove", function() {
  $(this).closest(".row").remove();
});

您可以在div行本身添加一个remove按钮，并使用事件委托绑定点击事件。

var template = $('#line_1').clone();
$('#cloneButton').click(function() {
  var rowId = $('.row').length + 1;
  var klon = template.clone();
  klon.attr('id', 'line_' + rowId)
    .insertAfter($('.row').last())
    .find('option')
    .each(function() {
      $(this).attr('id', $(this).attr('id').replace(/_('d*)$/, "_" + rowId));
    })
});
$(document).on("click", ".remove", function() {
  $(this).closest(".row").remove();
});

HTML:

<div class="row" id="line_1">
  <div class="form-group col-md-2">
    <label class="control-label">State</label>
    <select class="form-control">
      <option id="Select_1">Select State</option>
      <option id="Selangor_1">Selangor</option>
      <option id="KualaLumpur_1">Kuala Lumpur</option>
      <option id="Malacca_1">Malacca</option>
      <option id="Perak_1">Perak</option>
      <option id="Kedah_1">Kedah</option>
    </select>
  </div>
  <input type="button" class="remove" value="remove" />
</div>
<a id="cloneButton" class="btn btn-primary">Add State</a>

Fiddle

相关文章：