Как удалить конкретный элемент из 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.Он остается в доме, но не будет иметь таких же последствий.Обратной стороной вашего примера является то, что изображения, скорее всего, будут перемещены.

Если вы действительно хотите удалить span.twitter-tweet и у вас нет контроля над источником, вы можете удалить его в css.Я полагаю, что твиттер обычно предлагает CSS удалить вещи из каналов.

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

Звучит глупо, но это, вероятно, лучший сценарий здесь.Похоже, у вас есть объект jquery, встроенный в ваш angular, который не сразу доступен, когда страница / dom завершена.