如何使用Javascript從DOM中刪除元素？

Question

使用JavaScript，我試圖刪除和刪除離子列表中的元素（或每個獨立的離子項目元素），但我無法這樣做。 HTML是動態生成的。

這是我的錯誤，當我取消對JS：

TypeError: Cannot read property 'childNodes' of undefined 

最起碼，我希望能夠去除DOM的圖像。

有關如何做到這一點的任何建議？

的Javascript：

function removeElementsByClass(className){ 
    var elements = document.getElementsByClassName(className); 
    // while(elements.length > 0){ 
    //  elements[0].parentNode.removeChild(elements[0]); 
    // } 
    console.log(elements); 
} 

removeElementsByClass('image'); 

HTML：

<div class="collection-repeat-container" style="transform: translate3d(0px, 0px, 0px);"> 

    <ion-item collection-repeat="item in locations" style="padding: 0px 0px 15px; border: 0px; transform: translate3d(0px, 0px, 0px); height: 550px; width: 451px;" class="item"> 



    <!-- START OF IMAGE --> 
    <div class="item item-image"> 
     <a on-tap="getMap($index)" class="disable-user-behavior"> 
     <img src="http://41.media.tumblr.com/c1f8c181025553297b6939e152b9952e/tumblr_mudb5hymz41r1thfzo6_1280.jpg" class="image" style="height: 450px;"> 
     </a> 
    </div> 
    <!-- END OF IMAGE --> 

    <div class="item item-text-wrap" style="border-color:white; padding-bottom:25px;"> 
     <label class="positive"> 
     <i class="ion-information-circled positive"></i> 
     </label> 

     <label style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" class="ng-binding">&nbsp;A beautiful place because of the sound the wind makes as it blows through the thick bamboo grove.</label> 

    </div> 


    </ion-item> 

    <ion-item collection-repeat="item in locations" style="padding: 0px 0px 15px; border: 0px; transform: translate3d(0px, 549px, 0px); height: 550px; width: 451px;" class="item"> 



    <!-- START OF IMAGE --> 
    <div class="item item-image"> 
     <a on-tap="getMap($index)" class="disable-user-behavior"> 
     <img src="http://209.205.207.20/wp-content/uploads/2013/05/31.jpg" class="image" style="height: 450px;"> 
     </a> 
    </div> 
    <!-- END OF IMAGE --> 

    <div class="item item-text-wrap" style="border-color:white; padding-bottom:25px;"> 
     <label class="positive"> 
     <i class="ion-information-circled positive"></i> 
     </label> 

     <label style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" class="ng-binding">&nbsp;The dense growth of conifers in the forest blocks out most of the light inside the forest.</label> 

    </div> 


    </ion-item> 

    <ion-item collection-repeat="item in locations" style="padding: 0px 0px 15px; border: 0px; transform: translate3d(0px, 1098px, 0px); height: 550px; width: 451px;" class="item"> 



    <!-- START OF IMAGE --> 
    <div class="item item-image"> 
     <a on-tap="getMap($index)" class="disable-user-behavior"> 
     <img src="http://209.205.207.20/wp-content/uploads/2013/05/41.jpg" class="image" style="height: 450px;"> 
     </a> 
    </div> 
    <!-- END OF IMAGE --> 

    <div class="item item-text-wrap" style="border-color:white; padding-bottom:25px;"> 
     <label class="positive"> 
     <i class="ion-information-circled positive"></i> 
     </label> 

     <label style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" class="ng-binding">&nbsp;Vast farmlands get covered in golden, yellow rapeseed flowers stretching as far as the eyes can see.</label> 

    </div> 


    </ion-item> 

    <ion-item collection-repeat="item in locations" style="padding: 0px 0px 15px; border: 0px; transform: translate3d(-9999px, -9999px, 0px); height: 0px; width: 0px;" class="item"> 



    <!-- START OF IMAGE --> 
    <div class="item item-image"> 
     <a on-tap="getMap($index)" class="disable-user-behavior"> 
     <img src="{{item.imageLink}}" class="image" style="height: {{windowWidth}}px;"> 
     </a> 
    </div> 
    <!-- END OF IMAGE --> 

    <div class="item item-text-wrap" style="border-color:white; padding-bottom:25px;"> 
     <label class="positive"> 
     <i class="ion-information-circled positive"></i> 
     </label> 

     <label style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" class="ng-binding">&nbsp;{{item.Fact}}</label> 

    </div> 


    </ion-item></div> 


</div></ion-list> 

Answer 1

使用ES6，下面會爲你工作：

function removeElementsByClass(className){ 
    var elements = document.getElementsByClassName(className); 
    Array.from(elements).forEach(el => { 
     el.parentNode.removeChild(el); 
    }); 
    console.log(elements); 
} 

removeElementsByClass('image'); 

而且使用ES5，這將工作：

function removeElementsByClass(className){ 
    var elements = document.getElementsByClassName(className); 
    [].slice.call(elements).forEach(function(el) { 
     el.parentNode.removeChild(el); 
    }); 
    console.log(elements); 
} 

removeElementsByClass('image'); 

DEMO

你的代碼只找到的第一個元素，這將在最新的第二次迭代失敗的收藏。以上代碼遍歷所有元素，並將爲您刪除正確的一個！