国产视频app在前端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代碼,雖然可用,但還有優化的空間

国产视频app2、如果你有更好的邏輯代碼,不妨在下面留言哦。

国产视频app3、以上代碼,只對子元素有效,其它帶有子孫元素的DIV未測試

JQ代碼刪除元素下指定類型的所有子元素

相對于原生的JS來說,jquery 刪除元素下指定類型的所有子元素的代碼,要簡單的多。

JQ代碼:

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

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