如何使用Javascript从DOM中删除元素？

Question

With javascript, I am trying to remove and delete elements in the ion-list (or each of the individual ion-item elements) but I'm not able to do so. The HTML is dynamically generated.

This is the error I get when I uncomment the JS:

  TypeError: Cannot read property 'childNodes' of undefined

At the very least, I'd like to be able to remove the images in DOM.

Any advice on how to do this?

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

Using es6, below will work for you:

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

removeElementsByClass('image');

And using es5, this will work:

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

removeElementsByClass('image');

DEMO

Your code only finds the first element in the collection which will fail for the second iteration at latest. Above code loops through all elements and will remove the correct one for you!