如何從克隆中刪除div（jQuery-刪除元素的父行）

Question

我已添加克隆（超過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").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

Answer 1

首先更改ID ，如下所示。

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刪除它們。

Answer 2

具有#id1和#id2元素會動態添加到DOM中，因此您應該使用.on()函數來綁定事件，例如

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