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

时间:2019-04-02 13:38:06

标签: javascript angularjs

我截断了一些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

2 个答案:

答案 0 :(得分:1)

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

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

或普通javascript

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

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

答案 1 :(得分:0)

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

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

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

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