Jquery 使用.onclick事件侦听器删除带有按钮的特定div标记

我对整体编码还不熟悉。我用onclick事件生成了新的div标记，效果很好。我已经在每个div标记上创建并附加了一个新按钮，以防用户想要删除该div标记。但我的问题是，我似乎无法通过单击按钮创建onclick事件来删除特定的div

我不想删除所有的div标签，只想删除按钮所在位置的一个div标签

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#search").val();

console.log(itineraryInput);

var row = $("<div>");
    row.addClass("attraction");
    row.append("<p>" + itineraryInput + "</p>");
    // row.append("<button>" + "<button>" + "<button>");

var newButton1 = $("<button>" + "<p> Add to  leave a review </p>");
    newButton1.addClass("newButton");

    row.append(newButton1);

var newButton2 = $("<button>");
    newButton2.addClass("newButton");

    row.append(newButton2);

var newButton3 = $("<button>");
    newButton3.addClass("newButton");
    newButton3.attr("id", "deleteButton");

    row.append(newButton3);

    $("#first").prepend(row);
    // $("#first").append(attButton);
})

$("#deleteButton").on("click", function() {
    $(".div").remove();
});

//用于使用搜索功能并将其添加到第一天行程的变量
var巡回输入=$（“#搜索”）.val（）；
console.log（行程输入）；
变量行=$（“”）；
世界其他地区（“吸引力”）；
行。追加（“”+行程输入+”
”；
//追加（“+”+”）；
var newButton1=$（“+”添加以留下评论“
”；
newButton1.addClass（“newButton”）；
行。追加（newButton1）；
var newButton2=$（“”）；
newButton2.addClass（“newButton”）；
行。追加（newButton2）；
var newButton3=$（“”）；
newButton3.addClass（“newButton”）；
newButton3.attr（“id”，“deleteButton”）；
行追加（newButton3）；
$（“#第一”）。预编（世界其他地区）；
//$（“#第一”）.append（附件按钮）；
})
$（“#删除按钮”）。在（“单击”，函数（）上）{
$（“.div”）.remove（）；
});

---

没有任何内容正在删除。

这里的问题是，您正试图将一个事件（您的

单击

）添加到一个按钮，但该按钮仍然不在文档中，因为它是动态的

因此，您的解决方案可以在这里找到=>

从技术上讲，这是一个重复的问题，但由于您编写的代码太复杂，无法完成它必须完成的任务，因此我尝试向您指出一种更简单的方法

您正在添加大量创建递归和脏代码的

append

&

addClass

。 一个使它更干燥的解决方案是在所有的按钮上使用一个变量，并且只预先设置它

var row="";

row+="<div class='attraction'>";
row+="<p>" + itineraryInput + "</p>";
row+="<button class='newButton review'>Add to leave a review</button>";
row+="<button class='newButton doSomething'>Do something</button>";
row+="<button class='newButton deleteButton'>Remove itinerary</button>";
row+="</div>";

$("#first").prepend(row);

要将另一个事件添加到“其他”按钮，技术是相同的

这是您的代码，带有工作删除按钮：

$（“#搜索提交”）。在（“单击”，函数（）{
var巡回输入=$（“#搜索”）.val（）；
var行=”；
行+=”；
行+=“”+行程输入+“
”；
行+=“添加以留下评论”；
行+=“做点什么”；
行+=“删除行程”；
行+=”；
$（“#第一”）。预编（世界其他地区）；
})
$（文档）。在（“单击“，”.deleteButton”，函数（）上{
$（this）.最近的（“.attraction”）.remove（）；
});
.newButton{
宽度：33%；
}

添加到您的行程中！
以防有人需要帮助。我可以这样做吗：
$（文档）。在（“单击”，“某物”，function（）{$（“div”）。appendTo（#second”）；}）
将特定div移动到另一个容器？我之所以这样问，是因为jQuery文档提到，我们还可以在页面上选择一个元素，并使用
appendTo
将其插入到另一个y中。但我想不出来。
$(document).on("click", ".deleteButton", function() {
    $(this).closest(".attraction").remove();
});