在前端web设计中,使用js动态脚本很容易删除掉一个元素中的所有子元素,但如果要删除元素中所有指定类型的子元素该如何操作呢?今天飞鸟慕鱼博客就来和大家说一说,如何使用js删除一个元素下所有指定类型子元素的方法。

js 删除元素下指定类型的所有子元素

这里以删除元素下,所有的图片元素为例

逻辑代码:

<div id="mochu" class="mochu">
    <p>第一</p>
    <div>第二</div>
    <img src="1.png"/>
    <div>第三</div>
    <i>第四</i>
    <img src="2.png" />
</div>
<script>
    str= '';
    list = document.getElementById('mochu').children;
    for (i = 0; i < list.length; i++) {
        //循环得到所有IMG元素的索引
        if(list[i].tagName == 'IMG'){
            str += i+',';
        }
    }
    //转成数据
    arr = str.split(",");
    //去掉数组的最后一项,因为最后一项为空
    arr.pop();
    //数据倒序排列,因为要从索引最大的子元素开始删除,不然会出错
    arr.reverse();
    for (i = 0; i < arr.length; i++) {    
        elent = document.getElementById('mochu');
        //开始删除子元素
        elent.removeChild(elent.children[parseInt(arr[i])]);
    }
</script>

运行结果如下图:

js 删除元素内所有指定类型子元素的方法

注:

1、以上原生的JS代码,虽然可用,但还有优化的空间

2、如果你有更好的逻辑代码,不妨在下面留言哦。

3、以上代码,只对子元素有效,其它带有子孙元素的DIV未测试

JQ代码删除元素下指定类型的所有子元素

相对于原生的JS来说,jquery 删除元素下指定类型的所有子元素的代码,要简单的多。

JQ代码:

<!--HTML代码,参考上面的示例-->
<script>
    $('#mochu').find('img').remove();
</script>

注意:使用 JQ 代码前,一定要先加载 jquery.js