動態添加和刪除節點元素，函數封裝

時間 2019-12-14

原文原文鏈接

　　昨天碰到的一道筆試題：向文檔html指定元素中動態增長dom節點數據，新增節點自帶刪除按鈕（刪除對應節點）。要求：增長的節點數據不能超過10條，至少保留1條節點數據。html

HTML：app

<div id="container">
    <button id="btn_add" class="btn-add">新增</button> 
    <div id="wrap"></div>  
</div>

script：dom

思路：將添加的節點方法封裝在addDiv()函數裏，這樣只需重複調用就能動態添加相同的節點。將刪除節點函數delDiv()綁定在對應的節點上，這樣就能實現刪除指定節點了。函數

window.onload = function(){
    var wrap = document.getElementById('wrap');
    //增長節點
    var addbtn = document.getElementById('btn_add');
    addbtn.onclick = function(){
        if(wrap.childNodes.length < 10){
            addDiv();           
        }else{
            alert('節點數量超過限制，沒法添加！');
        }
    }            
    function addDiv(){
        var ele = document.createElement('div');
        ele.className = 'content-wrap';
        var firChildNode = document.createElement('span');
        firChildNode.innerHTML = 'content';
        var secChildNode = document.createElement('button');
        secChildNode.className = 'btn-del';
        secChildNode.innerHTML = '刪除';
        ele.appendChild(firChildNode);
        ele.appendChild(secChildNode); 
        wrap.appendChild(ele);
        //按鈕添加刪除功能
        secChildNode.onclick = delDiv;
    }
    function delDiv(){
        if(wrap.childNodes.length > 1){
            wrap.removeChild(this.parentNode);
        }else{
            alert('最後一個節點沒法刪除！');
        }        
    }
}

完成代碼：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增長和刪除節點</title>
</head>
<body>
<div id="container">
    <button id="btn_add" class="btn-add">新增</button> 
    <div id="wrap"></div>  
</div> 

<script>
    window.onload = function(){
        var wrap = document.getElementById('wrap');
        //增長節點
        var addbtn = document.getElementById('btn_add');
        addbtn.onclick = function(){
            if(wrap.childNodes.length < 10){
                addDiv();           
            }else{
                alert('節點數量超過限制，沒法添加！');
            }
        }            
        function addDiv(){
            var ele = document.createElement('div');
            ele.className = 'content-wrap';
            var firChildNode = document.createElement('span');
            firChildNode.innerHTML = 'content';
            var secChildNode = document.createElement('button');
            secChildNode.className = 'btn-del';
            secChildNode.innerHTML = '刪除';
            ele.appendChild(firChildNode);
            ele.appendChild(secChildNode); 
            wrap.appendChild(ele);
            //按鈕添加刪除功能
            secChildNode.onclick = delDiv;
        }
        function delDiv(){
            if(wrap.childNodes.length > 1){
                wrap.removeChild(this.parentNode);
            }else{
                alert('最後一個節點沒法刪除！');
            }        
        }
    }

    // addbtn.onclick = function(){
    //     if(wrap.childNodes.length < 10){
    //         var newele = ele.cloneNode(true);//深複製
    //         wrap.appendChild(newele);            
    //     }else{
    //         alert('節點數量超過限制，沒法添加！');
    //     }
    // }
</script> 
</body>
</html>