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

debugcn 发表于 Dev

Manofsilva

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

由于jQuery文档提到我们还可以选择页面上的一个元素并将其插入到另一个y中，因此我尝试使用appendTo来解决这个问题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");
})

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

尼丁·约瑟夫

您需要先更正代码，.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。