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

Question

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

自从 jQuery 文档提到我们还可以 select 页面上的一个元素并使用 appendTo 将其插入另一个 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>

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

Moving specific div tag from one container to another in the same page

tags

jquery

onclick

buttonclick

onclicklistener