将特定 div 标签从一个容器移动到同一页面中的另一个容器

Question

我使用onclick 事件生成了新的 div 标签，效果很好。我在每个 div 标签上创建并附加了一个新按钮，以防用户想要删除该 div 标签并且效果很好。但我无法弄清楚如何将包含所有信息和按钮的特定行从我的#first 容器移动到我的#second 容器

我已经尝试使用 appendTo 来解决它，因为 jQuery 文档提到我们还可以选择页面上的一个元素并将其插入另一个 y 使用 appendTo。

  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();
});


//This is the part that is not working!!!!

$(document).on("click", "something", function() {
   $("div").appendTo("#second");
})

我需要在同一页面上看到一行从一个容器移动到另一个容器。

Answer 1

您需要首先将代码更正为 .something 而不是 something 以用于您的点击侦听器。然后，您可以使用closest() 获取整个div 并使用appendTo() 追加

$("#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();
});

$(document).on("click", ".something", function() {
  $(this).closest('.attraction').appendTo("#second");
})

.newButton {
  width: 33%;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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>