如何从html javascript / angularjs中删除特定元素

Question

我有一些html片段，其中包含要删除的“ twitter-widget”元素。这是代码：<div id="newsroom-bodyText" dir="ltr" class="ng-scope"><!-- ngIf: LUC.singleImage!='multi_image' --><!-- ngRepeat: item in LUC.allObjects_final track by $index --><div ng-repeat="item in LUC.allObjects_final track by $index" class="live_block ng-scope" style=""><div id="live_block_time"><!-- ngIf: aItem.desk_obj --><!-- ngIf: !aItem.desk_obj --><p ng-if="!aItem.desk_obj" class="ng-binding ng-scope">2019-04-02 15:18:32</p><!-- end ngIf: !aItem.desk_obj --></div><!-- ngIf: item.title!='' --><div id="c_title" ng-if="item.title!=''" class="ng-scope"><p id="" class="live_block_title"> <span class="" dynamic="item.title">Business Story</span></p></div><!-- end ngIf: item.title!='' --><!-- ngIf: LUC.singleImage=='multi_image' --><div ng-if="LUC.singleImage=='multi_image'" dynamic="item.lu_media_placeholder" class="composePlaceHolder ng-scope ng-isolate-scope" view-item=""><div class="dropcontiner ng-scope" ng-drop="true" ng-drop-success="onDropCompletes($data,$event)"><i id="closeBtn" ng-click="onClickCloseImage($data,$event)" class="nr-placeholder-close close fa fa-times-circle" aria-hidden="true"></i><ul id="dropUl" class="dropUl noRightClick twitterFeedSection"></div></div><!-- end ngRepeat: item in LUC.allObjects_final track by $index --></div>这就是我尝试的方式：$element.find("#liveUpdatePreview").html().find('twitter-widget').remove();但我得到的错误是：finalhtml.find is not a function

Answer 1

您可以使用Jquery来做到这一点...

window.onload = function() {

    $("span.twitter-tweet").remove();

};

或纯JavaScript

window.onload = function() {

    var elem = document.querySelector('span.twitter-tweet');

    elem.parentNode.removeChild(elem);

};

如果这些方法不起作用，那么您可能正在运行一个脚本，它正在设置该跨度并保持该跨度。

Answer 2

首先，在出现问题之前...重复中的ng-if可能会导致文档摘要循环。每次循环时，如果if从dom中删除一个项目，它将再次循环。如果您绝对必须循环删除某些内容，则应使用ng-show / hide。它仍然保留在dom中，但不会产生相同的影响。您的示例的缺点是图像很可能会被推开。

如果您确实要删除span.twitter-tweet，但是您无法控制源，则可以在CSS中将其删除。我相信twitter通常建议CSS从提要中删除内容。

span.twitter-tweet { display:none !important; }

听起来很傻，但这可能是这里最好的情况。看来您的Angle中嵌入了一个jquery对象，当页面/ dom完成时，无法立即访问该对象。