如何将页面内#first容器的特定div行移至#second容器？

我帮你定位到了代码里的两个关键错误，修正后就能实现div在#first和#second容器间的移动功能啦：

错误点1：点击事件的选择器不正确 #

你绑定点击事件时写的是"something"，这会让jQuery去寻找标签名为<something>的元素，但你的按钮是用类名.something定义的，所以必须加上类选择器的前缀.，改成.something才能正确匹配到按钮。

错误点2：目标元素范围太大 #

你用$("div").appendTo("#second")会把页面上所有div元素都移到#second容器里，这显然不是你想要的效果。你需要的是点击按钮所在的那一行.attraction div，所以要用$(this).closest(".attraction")来精准定位当前按钮所属的父级div，再执行移动操作。

修正后的完整代码片段 #

// 生成新div的代码（这部分没问题，保留）
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() {
  // 精准获取当前按钮所在的.attraction div，移到#second容器
  $(this).closest(".attraction").appendTo("#second");
})

额外扩展（可选） #

如果之后需要实现双向移动（比如从#second移回#first），只需要给按钮加个判断逻辑，检查当前div所在的父容器，然后切换目标容器即可：

$(document).on("click", ".something", function() {
  var $targetDiv = $(this).closest(".attraction");
  if ($targetDiv.parent().attr("id") === "first") {
    $targetDiv.appendTo("#second");
  } else {
    $targetDiv.appendTo("#first");
  }
})

内容的提问来源于stack exchange，提问作者Manofsilva