在Angular js中单击时删除HTML元素答案

【问题标题】：remove HTML element on click in Angular js在Angular js中单击时删除HTML元素
【发布时间】：2018-07-05 16:53:15
【问题描述】：

这是我的指令。在 body 上显示一个 Div。

app.directive("autosuggest", function($rootScope) {
      return {
            scope: {
              doneFlag      : "=",
              groupFlag     : "=",
              inviteesFlag  : "=",
              init: '&'
            },
            templateUrl : "title.html",
            link: function(scope, element, attrs) { 
                  }

});

在title.html中

<div class="showw">
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

我包含这样的指令

<div autosuggest="" done-Flag="1" group-Flag="1"  invitees-Flag="1" selected-Array="" ></div>

所以当我点击图片时，这个<div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div> 部件会从身体中移除。就像 Javascript 中的删除元素一样。我将如何在 angularJS 中实现这一点？

【问题讨论】：

标签： html angularjs

【解决方案1】：

在你的指令中使用下面。

指令

app.directive("removeMe", function() {
      return {
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }

});

HTML

<div class="showw" remove-me>
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

Working Demo

【讨论】：

这只会删除 IMG 元素，但这很容易解决。
另外，jquery 是不必要的。您可以在点击处理程序中使用 element.parent().remove()。

【解决方案2】：

您可以简单地创建一个指令，添加一个删除元素 html 的函数。然后您可以将其粘贴在 ng-click 上。我在这里做了一个小提琴：http://jsfiddle.net/qDhT9/

// in the directive
scope.remove = function() {
    elt.html('');
};
// in the dom
<div remove-on-click ng-click="remove()"> 
    REMOVE ME 
</div>

希望这有帮助！

【讨论】：

我们也可以将 ng 类应用于自定义指令。喜欢<div id="autosuggest" class="autosuggest" ng-class="{'Show-Class':displayDivCss==true}" autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div>
没错，它会控制div上的类
这不起作用。我也在 ng-class 中检查条件。但它不会将 show-class 应用于 div。所以你能告诉我其他应用条件类的方法吗？
ng-class 是正确的。这是一个与您原来的问题不同的问题，但这是一个工作示例jsfiddle.net/qDhT9/6

【解决方案3】：

对于清除/移除html元素，我们可以使用以下方法

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.empty();  //clears contents

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.remove();   //removes element

参考：http://blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp

【讨论】：

它曾经与 Angular 1 一起工作。不确定新版本是否有变化。我猜删除功能应该还是不错的！

【解决方案4】：

对 Aparna 的回答进行了更强大的改编，您可以使用 $document 服务，它充当浏览器的“window.document”对象的包装器。因此，您可以访问 '$document' 对象作为依赖项，而不是全局访问 'document' 变量。这有助于使您的代码更具可测试性。

例如：

app.controller('exampleCtrl', function($scope, $document) {
  $scope.deleteArticle = function(id) {
    var articleRow = angular.element($document[0].querySelector('div[data-articleid="'+id+'"]'));
    articleRow.remove();
  };
});

【讨论】：