利用循环removeChild删除节点只删除一半问题

Posted 有梦就能实现

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用循环removeChild删除节点只删除一半问题相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
  <head>
    <title>adduser.html</title>
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="../js/append1.js"></script>
      
  </head>
    
  <body >
    <div align="center">
        <div>添加联系人</div>
        <input type="text" name="name">姓名<br/>
        <input type="text" name="phone">电话<br/>
        <input type="text" name="mail">邮箱<br/>
        <input type="button" onclick="add()" value="提交">
    </div>
    <hr>
    <div align="center">
        <table border="1" cellspacing="0" id="table">
            <tr id="Button">
                <td colspan="4" align="center">
                    <input type="button" value="全选" onclick=All()>
                    <input type="button" value="反选" onclick=other()>
                    <input type="button" value="删除" onclick=Delete()>
                </td>
            </tr>
            <tr>
                <td><input name="items" type="checkbox" ></td>
                <td>李四</td>
                <td>1361888234</td>
                <td>[email protected]</td>
            </tr>
        </table>
          
    </div>
  </body>
</html>

 

 

function add(){
                          
                var Node_name=document.getElementsByName("name")[0];
                var Node_phone=document.getElementsByName("phone")[0];
                var Node_mail=document.getElementsByName("mail")[0];
                  
                var Element_tr=document.createElement("tr");
                  
                var select_td=document.createElement("td");
                var input_node=document.createElement("input");
                input_node.setAttribute("name","items");
                input_node.setAttribute("type", "checkbox");
                select_td.appendChild(input_node);
              
                var name_td=document.createElement("td");
                var name_text=document.createTextNode(Node_name.value);
                name_td.appendChild(name_text);
                  
                var phone_td=document.createElement("td");
                var phone_text=document.createTextNode(Node_phone.value);
                phone_td.appendChild(phone_text);
                  
                var mail_td=document.createElement("td");
                var mail_text=document.createTextNode(Node_mail.value);
                mail_td.appendChild(mail_text);
                  
                  
                Element_tr.appendChild(select_td);
                Element_tr.appendChild(name_td);
                Element_tr.appendChild(phone_td);
                Element_tr.appendChild(mail_td);
                  
                var Element_table=document.getElementById("table");
                Element_table.appendChild(Element_tr);
  
        }
          
          
        function All(){
            var check_node=document.getElementsByName("items");
            for ( var i = 0; i < check_node.length; i++) {
                check_node[i].checked="checked";
            }
        }
        function other(){
            var check_node=document.getElementsByName("items");
            for ( var i = 0; i < check_node.length; i++) {
                if(check_node[i].checked){
                    check_node[i].checked=null;
                }else{
                    check_node[i].checked="checked";
                }
            }
        }
          
        function Delete(){
            var check_node=document.getElementsByName("items");
            //alert(check_node.length);             for ( var i = 0; i < check_node.length; i++) {
                  
                if(check_node[i].checked){
                    //alert(check_node[i].checked);                     var delete_tr_node=check_node[i].parentNode.parentNode;
                    //alert(delete_tr_node.nodeName);                     var Element_table=document.getElementById("table");
                    Element_table.removeChild(delete_tr_node);
                }
            }
        }
 
 
 
For循环颠倒一下就可以了，现在循环是从小到大，改成从大到小就可以了,因为数组长度在变化

 

以上是关于利用循环removeChild删除节点只删除一半问题的主要内容，如果未能解决你的问题，请参考以下文章

删除节点removeChild()

删除节点（removeChild()）

js移除某一类的div

React DOMException：无法在“节点”上执行“removeChild”：要删除的节点不是该节点的子节点

删除子节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。