我目前正试图处理JS，我希望能够使用onclick for(Set:，Rep:，Weight:(添加一个新的部分，但我一直遇到这样的问题，即新建的元素会成倍增加，因为父元素每次单击都会变大。我有办法解决这个问题吗？代码笔
<h1 class="h1 text-center">Log a Workout</h1>
<section class="workoutForm">
<form action="">
<ul>
<li>
<label for="name">Name of Workout:</label>
<input type="text" id="workoutName">
</li>
<li>
<label for="date">Date of Workout</label>
<input type="date" name="date" id="date">
</li>
<li>
<label for="date">Name of Exercise</label>
<input type="text" id="exerciseName" placeholder="Ex: Barbell Bench Press">
<ul>
<li id="entireSet">
<label for="exerciseName"> Set:</label>
<input type="number" name="set" id="set" required minlength="1">
<label for="exerciseName"> Reps:</label>
<input type="number" name="rep" id="rep" required minlength="1">
<label for="exerciseName"> Weight (lbs):</label>
<input type="number" name="weight" id="weight" required minlength="1">
<input type="button" value="Add Set" onclick="addNewSet()">
</li>
</ul>
<input type="button" value="Add Exercise">
</li>
<li class="button">
<button type="submit">Save Workout</button>
</li>
</ul>
</form>
</section>
<script>
function addNewSet() {
const parent = document.getElementById("entireSet");
const newSection = document.createElement("li");
newSection.id = "newSet";
newSection.innerHTML = parent.innerHTML;
const deleteBtn = document.createElement("input");
deleteBtn.type = "button";
deleteBtn.value = "Delete";
deleteBtn.id = "remove";
newSection.appendChild(deleteBtn);
parent.appendChild(newSection);
deleteBtn.addEventListener("click", function() { //used to delete sets that were added
newSection.remove();
});
}
</script>
欢迎使用Stackoverflow，您正在将li元素附加到li中，所以当您使用"添加新集合时；entireSet"；部分，然后旧的2个元素被再次添加。
通过使用CCD_ 1函数；entireSet"；
function addNewSet() {
const parent = document.getElementById("entireSet");
const newSection = document.createElement("li");
newSection.id = "newSet";
newSection.innerHTML = parent.innerHTML;
const deleteBtn = document.createElement("input");
deleteBtn.type = "button";
deleteBtn.value = "Delete";
deleteBtn.id = "remove";
newSection.appendChild(deleteBtn);
insertAfter(newSection, parent);
deleteBtn.addEventListener("click", function() { //used to delete sets that were added
newSection.remove();
});
}
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="h1 text-center">Log a Workout</h1>
<section class="workoutForm">
<form action="">
<ul>
<li>
<label for="name">Name of Workout:</label>
<input type="text" id="workoutName">
</li>
<li>
<label for="date">Date of Workout</label>
<input type="date" name="date" id="date">
</li>
<li>
<label for="date">Name of Exercise</label>
<input type="text" id="exerciseName" placeholder="Ex: Barbell Bench Press">
<ul>
<li id="entireSet">
<label for="exerciseName"> Set:</label>
<input type="number" name="set" id="set" required minlength="1">
<label for="exerciseName"> Reps:</label>
<input type="number" name="rep" id="rep" required minlength="1">
<label for="exerciseName"> Weight (lbs):</label>
<input type="number" name="weight" id="weight" required minlength="1">
<input type="button" value="Add Set" onclick="addNewSet()">
</li>
</ul>
<input type="button" value="Add Exercise">
</li>
<li class="button">
<button type="submit">Save Workout</button>
</li>
</ul>
</form>
</section>
</body>
</html>