使用removeChild动态删除节点注意

1. 语法

父元素.removeChild(要删除的子元素）

2. 使用场景注意

• 当子元素只有一个时，能够正常使用；

<!-- 点击按钮，删除文字 -->
<ul>
    <li>1 <button>点击</button></li>
</ul>
<script>
	//获取元素 删除某元素要获取其父元素
    let btn = document.querySelector('button')
    let ul = document.querySelector('ul')
    
    // 注册事件
    btn.addEventListener('click', function () {
     // 语法 父元素.removeChild(子元素)
     // 父元素.children获得的子元素节点以伪数组的形式存在
     ul.removeChild(ul.children[0])
     })
     </script>

• 当父元素含有多个子元素时，使用此方法会导致异常。如下：

<!-- 点击按钮，删除文字 -->
<ul>
    <li>1<button>删除</button></li>
    <li>2<button>删除</button></li>
    <li>3<button>删除</button></li>
    <li>4<button>删除</button></li>
    <li>5<button>删除</button></li>
    <li>6<button>删除</button></li>
</ul>

<script>
    // 获取元素 
    let btn = document.querySelectorAll('button')
    let ul = document.querySelector('ul')
    let list = document.querySelectorAll('li')

    // 注册事件
    for (let i = 0; i < list.length; i++) {
        btn[i].addEventListener('click', function () {
            console.log(list[i])
            console.log(ul.children[i])
            // 删除子元素 
            ul.removeChild(ul.children[i])
        })
    }
</script>

代码执行时，便会发生找不到指定删除元素的异常情况：

3. 异常分析

当我们删除获取来的list伪数组中某个指定元素时，由父元素.children获取来的子元素伪数组里的索引号会发生变化，这个时候我们要删除的list[i]就不一定等于ul.children[i]了。如图：

4. 解决方法

可以通过this查找其父元素进行删除。

 // ul.removeChild(ul.children[i])
 // ul>li>button
 //this指向的是btn[i] 此时this.parentNode 就是li[i]
 ul.removeChild(this.parentNode)