如何从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"> <li id="dropUlLI" class="noRightClick"> <span id="twitter-wjs"><span id="dropUlLIa" ng-bind-html="<blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;><p lang=&quot;en&quot; dir=&quot;ltr&quot;>Book now get 25% OFF. <br>Perfect Hyderabad Tour Packages || best offers and transparency || Maximum includes less excludes || 15 Yrs experience.|| Book now with Good Offers.|| Perfect &amp; Pre Customized.|| Discount with Quality. || Call &amp; Chat Support || <a href=&quot;&quot;></a> <a href=&quot;&quot;>pic.twitter.com/zVqSqYGHD1</a></p>— Hyderabad Package - Hyderabad Tour packages (@hydpack) <a href=&quot;https://twitter.com/hydpack/status/1111675837005344768?ref_src=twsrc%5Etfw&quot;>March 29, 2019</a></blockquote> <script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;></script>" class="align-text-top noRightClick twitterSection" data="<blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;><p lang=&quot;en&quot; dir=&quot;ltr&quot;>Book now get 25% OFF. <br>Perfect Hyderabad Tour Packages || best offers and transparency || Maximum includes less excludes || 15 Yrs experience.|| Book now with Good Offers.|| Perfect &amp; Pre Customized.|| Discount with Quality. || Call &amp; Chat Support || <a href=&quot;&quot;></a> <a href=&quot;&quot;>pic.twitter.com/zVqSqYGHD1</a></p>— Hyderabad Package - Hyderabad Tour packages (@hydpack) <a href=&quot;https://twitter.com/hydpack/status/1111675837005344768?ref_src=twsrc%5Etfw&quot;>March 29, 2019</a></blockquote> <script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;></script><script src=&quot;https://platform.twitter.com/widgets.js&quot;></script><script src=&quot;https://platform.twitter.com/widgets.js&quot;></script>"><twitter-widget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1" style="position: static; visibility: visible; display: block; transform: rotate(0deg); max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;" data-tweet-id="1111675837005344768"></twitter-widget>  </span></span></li></ul></div></div><!-- end ngIf: LUC.singleImage=='multi_image' --><div id="newsroom-bodyText" dynamic="item.body" class="content" dir="ltr"><p>twitter 5</p>
</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; }

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