Javascript 更新js变量

我已经动态更新了列表。每个列表元素都有文本输入和删除按钮。我有两个问题：

当我删除一个列表项时，cloneLi中的输入不会改变

当我在第一个列表项中输入文本值时，它也会复制到新的列表项中（我也尝试了elmtInput.reset（），但没有更改）

你知道怎么了吗

html代码：

<ul id="sortable">
    <li>
        <div class="row">
            <input type="text" id="item1" name="item1" value="">
            <div>
                <a class="btn" onclick="this.parentElement.parentElement.parentElement.style.display = 'none';"><i class="fas fa-trash"></i></a>
            </div>
        </div>
    </li>
</ul>

<input type="submit" value="New item" class="btn" onclick="cloneLi()">

js:

函数cloneLi（）{
leninputs=document.getElementsByTagName（“输入”）.length；
if（小于5）{
var ul=document.getElementById（“可排序”）；
var elmnt=ul.getElementsByTagName（“li”）[0]；
var cln=elmnt.cloneNode（真）；
document.getElementById（“可排序”）.appendChild（cln）；
var elmtInput=document.getElementsByTagName（“输入”）[leninputs]；
setAttribute（“name”，“item”+（leniputs+1）.toString（））；
setAttribute（“id”，“item”+（leniputs+1）.toString（））；
elmtInput.setAttribute（“值”，“值”）；
}否则{
警报（'达到的最大项目数！'）；
}
}

您需要将按钮输入排除在与其他输入元素一起选择的范围之外，因此在选择时要更加精确，这将使您的条件为最多只有五个输入，而不是四个输入，因为您正在计算一个加上的输入，您需要删除li元素，而不仅仅是隐藏它。为了保持其输入元素的原样，您需要更改克隆的每个新输入的值，以避免克隆值

var listsContainer=document.querySelector（“#可排序”）；
document.querySelector（“#add_item”）.onclick=function（）{
var inputLen=document.querySelectorAll（“#可排序输入”）.length，newList；
if（inputLen==5）{
返回警报（“已达到最大项目数！”）；
}
newList=document.createElement（“li”）；
newList.innerHTML=`
`;
listsContainer.appendChild（newList）；
}

ul{
列表样式类型：无；
裕度：0 10px 0；
填充：0；
宽度：300px；
}
.行{
背景颜色：浅绿色；
显示器：flex；
对齐项目：居中；
边界半径：10px；
填充：10px；
边缘底部：5px；
}
.路政署{
显示：内联块；
}
.第一分区{
字体大小：20px；
颜色：白色；
文本阴影：0 5px绿色；
光标：指针；
}
.行输入{
宽度：85%；
右边距：10px；
边界：无；
边框底部：1px实心#777；
}
#添加项目{
显示：无；
}
标签{
背景色：#ccc；
颜色：白色；
字体：粗体24px单空格；
填充物：5px；
边界半径：5px；
盒影：插入1px 1px 3px#fff；
光标：指针；
}

新建项

您实际上并没有删除任何内容，您只是通过设置

display:none来隐藏元素。
li
元素仍然是DOM的一部分，其内部的
输入也仍然是DOM的一部分-因此当然它仍然会被
getElementsByTagName（“输入”）
选中。谢谢，这解决了第1个问题
onclick=“this.parentElement.parentElement.parentElement.remove（）；”
。第二个呢？试试
elmtInput.value=”“
。多么简单：-）谢谢
function cloneLi() {
    leninputs = document.getElementsByTagName("input").length;
    if (leninputs < 5) {
        var ul = document.getElementById("sortable");
        var elmnt = ul.getElementsByTagName("li")[0];
        var cln = elmnt.cloneNode(true);
        document.getElementById("sortable").appendChild(cln);
        var elmtInput = document.getElementsByTagName("input")[leninputs];
        elmtInput.setAttribute("name", "item"+(leninputs+1).toString());
        elmtInput.setAttribute("id", "item"+(leninputs+1).toString());
        elmtInput.setAttribute("value", "");
    } else {
        alert('Max number of items reached!');
    }
}