Javascript 要将添加的元素移动到DOM的其他部分吗

我会试着说出我想做什么，并希望这是有意义的（我上周才知道！）。当单击我创建的delete按钮时，我希望与它相关联的内容进入我在HTML页面中创建的一个面板主体，其类名为“panelAdd”。非常感谢您的帮助，因为我是新手。谢谢你的阅读。我会把HTML放在第一位

HTML

移除按钮

$(document).on("click",".btn-danger", function(){
    $t = $(this).closest('tr').find('td')[0];
    $(this).parents("tr").remove();
    $('.panel-body').append($t);
   });
});

---

在本例中，您可以抓取要插入的内容并将其附加到目标面板

.panel body

。请参阅上面的小提琴，它将任务名称添加到已完成列表中

你希望这样吗

代码片段：

$(document).on("click",".btn-danger", function(){
    var removed = $(this).parents("tr").remove();
    $(".panel-body").append('<div class="panelAdd"></div>').append(removed);
});

$（文档）.on（“单击“，”.btn danger“，函数（））{
var removed=$（this.parents（“tr”）.remove（）；
$（“.panel body”）.append（“”）.append（已删除）；
});

让我知道这是否有帮助

您只需在删除按钮的

单击事件
上使用和，如下所示：

$(document).on("click",".btn-danger", function(){
    var detachedRow=$(this).parents("tr").detach(); //detach and store it as reference
    detachedRow.find('input[type="checkbox"]').remove();
    //I hope you don't need checkbox when task is complete so removing it from that row
    detachedRow.appendTo($('.panel .panel-body #myTableCompleted tbody'));
    append it to your completed panel
});

<div class="panel-body">
   <table class="table table-responsive myTable col-xs-offset2" id="myTableCompleted">
      <thead>
         <th>Task to Complete</th>
         <th>Time to Complete?</th>
         <th>Remove?</th>
      </thead>
      <tbody>
      </tbody>
   </table>
</div> 

注意：方法与相同，只是
.detach（）保留与删除的元素关联的所有jQuery数据。
当删除的图元要重新插入到中时，此方法非常有用
DOM将在以后的某个时间更新

我还在
.panel body
中添加了
表
结构，以获得相同的UI外观，并从中删除了
复选框
的列，如下所示：

$(document).on("click",".btn-danger", function(){
    var detachedRow=$(this).parents("tr").detach(); //detach and store it as reference
    detachedRow.find('input[type="checkbox"]').remove();
    //I hope you don't need checkbox when task is complete so removing it from that row
    detachedRow.appendTo($('.panel .panel-body #myTableCompleted tbody'));
    append it to your completed panel
});

<div class="panel-body">
   <table class="table table-responsive myTable col-xs-offset2" id="myTableCompleted">
      <thead>
         <th>Task to Complete</th>
         <th>Time to Complete?</th>
         <th>Remove?</th>
      </thead>
      <tbody>
      </tbody>
   </table>
</div> 


要完成的任务
是时候完成了？
去除

注意-我认为可能还有其他要求，如仅选中
要添加到已完成的
面板主体的复选框
等，如果是
在
删除中会有一个小的更改
代码

fiddle中的任何工作示例。当我从sublime打开它时，它运行良好，但在fiddle中似乎根本不起作用。您正在导入一些JS和CSS，但没有添加到问题中。我创建了一个，只需编辑它。将两个js文件合并在一起工作正常吗？或者你有什么问题？这正是我要找的。非常感谢。
<div class="panel-body">
   <table class="table table-responsive myTable col-xs-offset2" id="myTableCompleted">
      <thead>
         <th>Task to Complete</th>
         <th>Time to Complete?</th>
         <th>Remove?</th>
      </thead>
      <tbody>
      </tbody>
   </table>
</div>