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

Question

I have some html snipped which includes a "twitter-widget" element that I want to remove. This is the code:

<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>

And that's how I tried it:

$element.find("#liveUpdatePreview").html().find('twitter-widget').remove();

but I get the error, that:

finalhtml.find is not a function

Answer 1

You could use Jquery to do that...

window.onload = function() {
    $("span.twitter-tweet").remove();
};

or plain javascript

window.onload = function() {
    var elem = document.querySelector('span.twitter-tweet');
    elem.parentNode.removeChild(elem);
};

if those does not work, then you probably have a script running that it is setting this span and keeping it.

Answer 2

First, before your problem... the ng-if in your repeat is likely causing a document digest loop. As each time it loops, and the if removes an item from the dom, it is going to loop again. If you absolutely have to remove something in a loop you should use ng-show/hide. It remains in the dom, but it wont have the same repercussions. The down side to your example is the images will likely get pushed across.

If you really want to remove the span.twitter-tweet and you don't have control of the source you can remove it in css. I believe twitter usually suggests CSS to remove things from the feeds.

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

It sounds silly but that's likely the best case scenario here. It looks like you have a jquery object embedded inside your angular, which is not immediately accessible when the page / dom is complete.