Question

使用javascript，我试图删除和删除具有此CSS属性的离子列表（或每个单独的离子项元素）中的元素

transform: translate3d(-9999px, -9999px, 0px);

但我无法这样做。目前，使用下面的javascript，所有元素都会被删除。我也想删除对这些元素的任何引用。这里的HTML是动态生成的。在下面的HTML示例中，我引用的CSS属性的项目位于底部。

有关如何执行此操作的建议吗？

使用Javascript：

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

removeElementsByClass('item');

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

如果它总是在style属性上，那么你可以修改你的循环：

Array.from(elements).forEach(el => {
    if(el.style.transform === 'translate3d(-9999px, -9999px, 0px)'){
       el.parentNode.removeChild(el);
    }
});

如果它是CSS样式表的一部分，事情就会变得棘手。

如何使用Javascript删除具有某些属性的元素？

1 个答案: