我让克隆功能和文字计数器，它应该包含一个新的号码在每一个新的盒子，我会克隆重视，我下面的代码复制的元素，但新的元素总是指数量从第一来源，也可以是计数器总是写在第一个框中新号码，第一个框总是写1到最新的柜台数数。是否有可能与只有JavaScript做呢？我真的很感谢你的帮助。
var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;
container.addEventListener('click', function({target}) {
if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
counter ++;
var text = document.createTextNode(counter);
box.appendChild(text);
const clone = target.parentNode.cloneNode(true);
container.appendChild(clone);
}
if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
target.parentNode.remove(target)
}
}).container {
border: 1px solid black;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<div class="box">
<button class="cloneBtn">Clone</button>
<button class="deleteBtn">Delete</button>
</div>
</div>
</body>
</html>如果我理解正确的，问题是，你总是追加计数器值初始.box元素，你想将其追加到克隆的元素代替，所以你会看到在克隆元素的新计数器值：
var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;
container.addEventListener('click', function({target}) {
if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
counter++;
var text = document.createTextNode(counter);
// box.appendChild(text); <---- WRONG
const clone = box.cloneNode(true); // <-- Here clone the initial box instead target to avoid stacking of text nodes
clone.appendChild(text);
//^^^^^^^^^^^^^^^^^ here append to the cloned element
container.appendChild(clone);
}
if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
target.parentNode.remove(target)
}
}).container {
border: 1px solid black;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<div class="box">
<button class="cloneBtn">Clone</button>
<button class="deleteBtn">Delete</button>
</div>
</div>
</body>
</html>还有就是在你的代码有很多逻辑错误的：你克隆前追加文本，这就是为什么显示的顺序是错误的。你还按类选择，但所有的克隆盒将具有相同的类，结果是一团糟。我建议使用的ID和计数器附加到新创建/克隆元素的ID。并最终使用委托同一事件挂钩到多个元素。