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

您的代码只查找集合中的第一个元素，该元素最迟会在第二次迭代时失败。上面的代码循环遍历所有元素，并为您删除正确的元素！

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

1 个答案: