时间戳

首页 > 解决方案 > 克隆功能不适用于 JavaScript

javascript - 克隆功能不适用于 JavaScript

问题描述

我在 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>

标签： javascripthtmlfunctionclone

解决方案

lastChild是任何类型的最后一个子节点，包括文本节点。通过移动结束</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元素作为它们唯一的直接（元素）子元素。

推荐阅读