我会尝试说明我想做的事情，希望它有意义(我上周才学会这个!)。单击我创建的删除按钮时，我希望与之关联的内容进入我在 HTML 页面中创建的面板主体，其类名为“panelAdd”。非常感谢任何帮助，因为我很新。谢谢阅读。我先放 HTML
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>To Do List</title>
</head>
<body>
<h3 class="header">
<strong>To Do List</strong>
</h3>
<table class="table table-responsive myTable col-xs-offset2" id="myTable">
<thead>
<th>Complete?</th>
<th>Task to Complete</th>
<th>Time to Complete?</th>
<th>Remove?</th>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td><input type="checkbox" class="newCheck col-xs-offset-2" value=""></td>
<td><input type="text" class="newWord" placeholder="New task"></td>
<td><input type="text" class="newTime" placeholder="How long do you have?"></td>
<td><button class="btn btn-primary buttonAdd">Add Task</button></td>
</tr>
</tbody>
</table>
<footer>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Completed!</h3>
</div>
<div class="panel-body"></div>
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/add.js"></script>
<script type="text/javascript" src="js/remover.js"></script>
</body>
</html>
添加按钮
$(document).ready(function (){
$(".btn-primary").on("click", function(e) {
e.preventDefault();
var newWord, newRow, wordTd, newCheck, deleteButton, deleteTd;
var isDuplicate;
newWord = $(".newWord").val();
newTime = $(".newTime").val();
newCheck = $(".newCheck").val();
var newRow = $("<tr>");
var newCheck = $("<input>").attr("type", "checkbox").attr("class", "newCheck").attr("data-state", "not-checked");
var wordTd = $("<td>").append(newWord).before();
var timeTd = $("<td>").append(newTime).before();
var deleteButton = $("<button>").addClass("btn btn-danger buttonRemove").append("Remove");
var deleteTd = $("<td>").append(deleteButton);
newRow.append(newCheck).append(wordTd).append(timeTd).append(deleteTd).before();
$("tbody").append(newRow);
$("#newWord").val("")
});
});
$(document).on("click", ".newCheck", function(){
if($(this).prop("checked") === true){
$(this).parent().attr("class", "done");
}
else{
$(this).parent().removeClass();
}
});
删除按钮
$(document).ready(function (){
$(document).on("click",".btn-danger", function(){
$(this).parents("tr").remove();
});
});
最佳答案
删除按钮
$(document).on("click",".btn-danger", function(){
$t = $(this).closest('tr').find('td')[0];
$(this).parents("tr").remove();
$('.panel-body').append($t);
});
});
在本例中，您可以获取要插入的内容并将其附加到目标面板中 .panel-body。请参阅上面的 fiddle ，它将任务名称添加到已完成列表中。
关于javascript - 想要将添加的元素移动到 DOM 的不同部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33885611/