Javascript JS在克隆后使用按钮删除div

我在删除包含div的按钮时遇到问题。首先我克隆并添加按钮，然后将其类从“添加”更改为“删除”。然后我尝试用“remove”删除包含div的按钮，但无法访问remove函数

<div class="margin"></div>

<div class='new'>
    <button type="button" class="btn btn-success add"><i class="fas fa-plus"></i></button>
</div>

<script>
$(document).ready(function() {
    var div = document.getElementById('new');
    $(".add").click(function(){
        clone = div.cloneNode(true);
        $(clone).insertAfter(".margin");


$("button.add:not(:last)).removeClass('add').addClass('remove');


    $(".remove").click(function(){
        console.log('inside')
        //$(this).parent('div').remove();
    });
});
</script>

$（文档）.ready（函数（）{
var div=document.getElementById（'new'）；
$（“.add”）。单击（函数（）{
clone=div.cloneNode（真）；
$（克隆）.insertAfter（“.margin”）；
$（“button.add:not（：last））.removeClass（'add'）.addClass（'remove'）；
$（“.remove”）。单击（函数（）{
console.log（'inside'）
//$（this.parent（'div'）.remove（）；
});
});

document.getElementById（'new'）…ur元素没有ID。它的类名是'new'，但不是它的ID。一些更正应该可以使它工作：

$（文档）.ready（函数（）{
var div=document.getElementById（'new'）；
$（“.add”）。单击（函数（）{
clone=div.cloneNode（真）；
$（克隆）.insertAfter（“.margin”）；
$（“button.add:not（：last）”）.removeClass（'add'）.addClass（'remove'）；
$（“.remove”）。单击（函数（）{
console.log（'inside'）
//$（this.parent（'div'）.remove（）；
});
})
})；

。添加{
背景：绿色；
}
.移除{
背景：红色；
}
钮扣{
颜色：白色；
}

新的

document.getElementById（'new'）…ur元素没有ID。它的类名是'new'，但不是它的ID。一些更正应该可以使它工作：

$（文档）.ready（函数（）{
var div=document.getElementById（'new'）；
$（“.add”）。单击（函数（）{
clone=div.cloneNode（真）；
$（克隆）.insertAfter（“.margin”）；
$（“button.add:not（：last）”）.removeClass（'add'）.addClass（'remove'）；
$（“.remove”）。单击（函数（）{
console.log（'inside'）
//$（this.parent（'div'）.remove（）；
});
})
})；

。添加{
背景：绿色；
}
.移除{
背景：红色；
}
钮扣{
颜色：白色；
}

新的

请创建SO代码段好吗？请创建SO代码段好吗？在单击处理程序中添加事件会产生非常糟糕的结果，您应该使用

.on（）

我只是遵循给定的代码示例，并尝试尽可能少地进行更改以使其正常工作……同时不尝试作为一个整体来纠正方法whole@Mischa谢谢：），这就解决了问题。有没有更优雅的方法呢？在单击处理程序中添加事件会产生非常糟糕的结果，您应该使用

.on（）

我只是遵循给定的代码示例，并尝试尽可能少地进行更改以使其正常工作……同时不尝试作为一个整体来纠正方法whole@Mischa谢谢：），这就解决了问题。有没有更优雅的方法呢？