DOM ------ 删除节点

简介: DOM ------ 删除节点

删除节点:node.removeChild(child)

  //html代码
  <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    //js代码
    // 1.获取元素
  var ul = document.querySelector('ul')
  var btn = document.querySelector('button')
  // 2.删除元素 node.removeChild(child)
  // ul.removeChild(ul.children[0])
  // 3.点击按钮依次删除里面的孩子
  btn.onclick = function() {
    if(ul.children.length == 0){
                this.disabled = true
            }else{
                ul.removeChild(ul.children[0])
        }
  }

当子节点的长度为0, 即没有内容时, 设置删除按钮不可用

不积跬步无以至千里 不积小流无以成江海

相关文章
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
3月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树