Перемещение определенного тега div из одного контейнера в другой на той же странице - PullRequest
Новая
       98

Перемещение определенного тега div из одного контейнера в другой на той же странице

1 голос
/ 19 октября 2019

У меня есть новые теги div, генерируемые с событием onclick, и это прекрасно работает. Я создал и добавил новую кнопку к каждому тегу 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");
})

Мне нужно увидеть перемещение строки из одного контейнера в другой на той же странице.

1 Ответ

1 голос
/ 19 октября 2019

Сначала необходимо исправить код как .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>
...