在JavaScript中，有没有一种方法可以制作一个按钮/文本字段组合，将文本字段的内容附加到一个空白段落中

Question

它还必须在旁边制作一个按钮，使我可以只清除文本字段的内容。

这是我到目前为止的代码，但我完全不知道如何继续：

$(function(){
var assignmentCount = 0
$("#assignment").on("click",function(event){
var task1 = $("#task").val()
$("p").append("<p id=task>"+task1+"</p>");
$("p").append("<button id="+assignmentCount+" "+">Complete</button>");
})
$("#button").on("click",function(event){
$("task1").empty()
})
$("#clear").on("click",function(event){
$("p").empty()
})
$("#finish").on("click",function(event){
var completedText = $("#finished").val()
asdf = completedText+" was completed."
$("p").append(asdf);
})
});

我不知道如何只清除一行附加文本，而且我对javascript和一般中的代码也有点陌生

Answer 1

<p>中不能有<p>或类似<button>的动作项。将其转换为<div>，使其工作。我还做了一些改变：

1. 将<p>容器更改为<div>容器以生成子级<p>
2. 你的id正在重复，所以我更新了它们以使其工作
3. 没有名为task1的标签，所以我在前面添加了一个#，使其成为id

$(function() {
var assignmentCount = 0
$("#assignment").on("click", function(event) {
var task1 = $("#task").val()
$("div").append("<p id='task" + assignmentCount + "'>" + task1 + "</p>");
$("div").append("<button id=btn" + assignmentCount + " " + ">Complete</button>");
})
$("#button").on("click", function(event) {
$("#task1").empty();
})
$("#clear").on("click", function(event) {
$("div").empty();
});
$("#finish").on("click", function(event) {
var completedText = $("#finished").val()
asdf = completedText + " was completed."
$("p").append(asdf);
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button id="button">Empty</button>