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

Question

我是整体编码新手。我使用 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();
});

没有什么是删除的。

Answer 1

这里的问题是您正在尝试将事件(您的click(添加到文档中仍然没有的按钮，因为它是动态的。

所以你的解决方案可以在这里找到=> 动态创建的元素上的事件绑定？

从技术上讲，这是一个重复的问题，但由于您正在编写的代码对于它必须做的事情来说太复杂了，因此我尝试向您指出一种更简单的方法。

您正在添加大量创建递归和脏代码的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);

之后，您可以使用我之前发布的解决方案来添加要删除的事件按钮：

$(document).on("click", ".deleteButton", function() {
$(this).closest(".attraction").remove();
});

要将其他事件添加到其他按钮，技术是相同的。

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

$("#search-submit").on("click", function() {
var itineraryInput = $("#search").val();
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 something'>Do something</button>";
row+="<button class='newButton deleteButton'>Remove itinerary</button>";
row+="</div>";
$("#first").prepend(row);
})
$(document).on("click", ".deleteButton", function() {
$(this).closest(".attraction").remove();
});

.newButton {
width: 33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
<div class="col">
<input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
<button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
</div>
</div>
<div class="trans_container">
<div id="trans_first"></div>
<div id="trans_second"></div>
</div>
<div class="acontainer">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>

编辑 1我回复您的评论。

您可以使用appendTo来...使用 jQuery 将内容附加到您想要的任何位置。我给你贴一个例子。在这里，我获取我的行程并将其放入div中，#second单击名为">附加到 #second"的按钮。 (在您的评论中，您在something之前忘记了一个点(.((因为something是一个类，也许这就是问题所在(：

$(document).on("click", ".something", function() { 
/* ^^^ write a dot here */  
$("div").appendTo("#second"); 
});

$("#search-submit").on("click", function() {
var itineraryInput = $("#search").val();
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 something'>Append to #second</button>";
row+="<button class='newButton deleteButton'>Remove itinerary</button>";
row+="<div class='green'></div>";
row+="</div>";
$("#first").prepend(row);
})
$(document).on("click", ".deleteButton", function() {
$(this).closest(".attraction").remove();
});
$(document).on("click", ".something", function() { 
var parent=$(this).closest(".attraction");
$("p", parent).appendTo("#second"); 
});

.newButton {
width: 33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mb-2">
<div class="col">
<input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
<button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
</div>
</div>
<div class="trans_container">
<div id="trans_first"></div>
<div id="trans_second"></div>
</div>
<div class="acontainer">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>