javascript - 如何从克隆中移除 div ( jQuery移除元素行的父元素)

  显示原文与译文双语对照的内容
0 0

我已经添加克隆( 超过 3 ) 并删除克隆按钮。 当我试图克隆


 <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");
});

它克隆了特定的div 。 单击remove删除 its ( 无法删除)


$(".remove").click(function(){
 $(this).closest("#id1").remove();
 $(this).closest("#id2").remove();
});

我也尝试过


$(".remove").click(function(){
 $(this).parents("#id1").remove();
 $(this).parents("#id2").remove();
});

$(".remove").click(function(){
 $("#id1").remove();
 $("#id2").remove();
});

当我使用这种方法时,它会删除第一个克隆( 第一个id1和 id2 ) 。 不删除当前克隆 div

时间: 原作者:

0 0

首先更改 ID,如 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");
});

然后使用新的ID 或者公共类 .clonedDiv 来删除它们。

原作者:
0 0

具有 #id1#id2的元素正在动态添加到DOM中,因这里应该使用 .on() 函数来绑定事件 e.g. 。


$(document).on('click', '.remove', function(){
 $("#id1").remove();
 $("#id2").remove();
});

...