I have add clone (more than 3) and remove clone button. when i try to clone
<div class="data-add">
<div class="form-group" id="id1">
<label class="col-lg-2 control-label"> Image* : </label>
<div class="col-lg-10">
<input id="input-702" name="userfile[]" type="file"class="file-loading">
</div>
</div>
<div class="form-group clearfix" id="id2">
<label class="col-lg-2 control-label">option* :
</label>
<div class="col-lg-10">
<select name="option[]" autocomplete="off">
<option>name1</option>
<option>name2</option>
<option>name3</option>
</select>
</div>
</div>
</div>
<button class="add" type="button">Add Another </button>
<button class="remove" id="remove"> remove </button>
$(".add").click(function(){
$("#id1").clone().appendTo(".data-add");
$("#id2").clone().appendTo(".data-add");
});
It clone particular div happening proper. when i click remove its not working (not able to remove)
$(".remove").click(function(){
$(this).closest("#id1").remove();
$(this).closest("#id2").remove();
});
i have tried this also
$(".remove").click(function(){
$(this).parents("#id1").remove();
$(this).parents("#id2").remove();
});
$(".remove").click(function(){
$("#id1").remove();
$("#id2").remove();
});
when i used like this it removing first clone(first id1 and id2). not removing current clone div
Change ID
first of all, like below.
var newId = 10; // Sample ID To Append
var startID = ["id1_", id2_];
$(".add").click(function(){
var oldId = newId;
startID[0].replace(oldId, newId);
startID[1].replace(oldId, newId);
var newId++;
$("#id1").clone().attr('id', startID[0]).addClass("clonedDiv").appendTo(".data-add");
$("#id2").clone().attr('id', startID[1]).addClass("clonedDiv").appendTo(".data-add");
});
Then use the new ID
or the common class .clonedDiv
to remove them.
Elements having #id1
and #id2
are being added in the DOM dynamically, so you should use .on()
function to bind your events eg
$(document).on('click', '.remove', function(){
$("#id1").remove();
$("#id2").remove();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.