[英]Add Remove Button on Cloned Field
Good day great people, I need help to add Remove button after the cloned happen. 美好的一天,伟大的人们,我需要帮助在克隆发生后添加“删除”按钮。 The Remove button should remove the cloned field.
删除按钮应删除克隆的字段。 Any suggestion would be appreciated.
任何建议,将不胜感激。 Bootply Version - http://www.bootply.com/LiqkgWUFF6
Bootply版本-http: //www.bootply.com/LiqkgWUFF6
Thanks in advance. 提前致谢。
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>
Try this: 尝试这个:
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();
});
You can add a remove button on the row div itself and bind the click event using event delegation. 您可以在行div本身上添加一个remove按钮,并使用事件委托来绑定click事件。
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: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.