使用.onclick事件监听器使用按钮删除特定的div标签

Question

我是整体编码的新手。我有一个新的div标签通过onclick事件生成，并且工作正常。我已经在每个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）添加到文档中仍然没有的按钮，因为它是动态的。

所以您的解决方案可以在这里找到=> Event binding on dynamically created elements?

从技术上讲，[[这是一个重复的问题，但是由于您编写的代码太复杂了，因此我试图为您提供一种更为简单的方法。

您正在添加很多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的任何位置附加内容。我举个例子。在此，我将行程单放在名为[

Append to #second的按钮上，并将其放在div #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>