克隆功能不适用于 JavaScript答案

【问题标题】：clone function is not working on JavaScript克隆功能不适用于 JavaScript
【发布时间】：2021-03-28 22:24:06
【问题描述】：

我在 html 文件上创建了一个克隆函数。但是代码中有一个奇怪的错误。当我将两个结尾的“div”放在同一行时，JavaScript 代码就可以正常工作。但是当我美化 html 代码或将最后一个结束标记放在另一行时，JavaScript 就不起作用了。请看注释行

<body>

<div class="container">
    <div class="col-2 m-3 bg-primary" id="show">working</div>
    <button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>

<div id="error" class="text-danger ml-3"></div>
    <div id="myList" style="list-style-type:none;" class="mt-3">
        <div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2"
                        onclick="removeIt()">X</button>
                </div>
            </div>
        </div></div> <!-- this line is causing issue -->

    <button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>

    
        <div class="form-check">
            <label class="form-check-label" for="numbers">
                Number Of Row
            </label>
            <input type="number" class="form-input" name="" id="numbers" value="1">
        </div>
        <button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
    let error = document.getElementById('error');

    function passNumber(){
        let numbers = document.getElementById('numbers').value;
        for(let i = 1; i <= numbers; i++){
            addElement();
        }
    }
    
    function hide() {
        document.getElementById('show').style.display = 'none';
    }
    function addElement() {
        error.innerHTML = '';
        let item = document.getElementById('myList').lastChild;
        let cln = item.cloneNode(true);
        document.getElementById('myList').appendChild(cln);
    }
    function removeIt() {
        let list = document.getElementById('myList');
        if(list.childNodes.length == 2){
             error.innerHTML=`you cant delete the last input box`;
        }else{
            let length = list.childNodes.length;
            list.removeChild(list.childNodes[length-1]);
        }
    }
</script>

这段代码运行良好。但是当我将代码更改为下面的行时，JavaScript 根本就不起作用 -

<body>

<div class="container">
    <div class="col-2 m-3 bg-primary" id="show">working</div>
    <button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>

<div id="error" class="text-danger ml-3"></div>
    <div id="myList" style="list-style-type:none;" class="mt-3">
        <div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2"
                        onclick="removeIt()">X</button>
                </div>
            </div>
        </div>
      </div> <!-- this line is causing issue -->

    <button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>

    
        <div class="form-check">
            <label class="form-check-label" for="numbers">
                Number Of Row
            </label>
            <input type="number" class="form-input" name="" id="numbers" value="1">
        </div>
        <button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
    let error = document.getElementById('error');

    function passNumber(){
        let numbers = document.getElementById('numbers').value;
        for(let i = 1; i <= numbers; i++){
            addElement();
        }
    }
    
    function hide() {
        document.getElementById('show').style.display = 'none';
    }
    function addElement() {
        error.innerHTML = '';
        let item = document.getElementById('myList').lastChild;
        let cln = item.cloneNode(true);
        document.getElementById('myList').appendChild(cln);
    }
    function removeIt() {
        let list = document.getElementById('myList');
        if(list.childNodes.length == 2){
             error.innerHTML=`you cant delete the last input box`;
        }else{
            let length = list.childNodes.length;
            list.removeChild(list.childNodes[length-1]);
        }
    }
</script>

【问题讨论】：

标签： javascript html function clone

【解决方案1】：

lastChild 是 any kind 的最后一个子节点，包括文本节点。通过移动结束 </div> 标记，您正在添加一个文本节点。

您可以改用lastElementChild 来仅获取列表中的最后一个元素。

这是一个简化的例子：

console.log(document.getElementById("container1").childNodes.length); // 2
console.log(document.getElementById("container2").childNodes.length); // 3

<div id="container1">
    <div>x</div></div>
<div id="container2">
    <div>x</div>
</div>

附注：您的 HTML 无效。 div 元素不能是 ul 元素的直接子元素。 ul 元素应该包含 li 元素作为它们唯一的直接（元素）子元素。

【讨论】：

你好 T.J.克劳德。我没有删除结束标签，我把它放在第二行。问题是当两个结束标记在一行中时，js 工作正常。但是当我将父标签的最后一个结束标签/结束标签放在另一行时。 javascript 是行不通的。您可以在代码编辑器上使用该代码并查看我在说什么。
@MarufAli - 抱歉，这是答案中的错字（我最初是不小心写了“mroving”，后来看到它并错误地将其更改为“removing”。它的意思是“moving”。 ") 它是 moving 在末尾添加文本节点的结束标记。你试过lastElementChild吗？