在 Angular js 中单击时删除 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21595774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove HTML element on click in Angular js
提问by Proxy_Server
This is my Directive. which display one Div on the body.
这是我的指令。在身体上显示一个 Div。
app.directive("autosuggest", function($rootScope) {
return {
scope: {
doneFlag : "=",
groupFlag : "=",
inviteesFlag : "=",
init: '&'
},
templateUrl : "title.html",
link: function(scope, element, attrs) {
}
});
And in title.html
在 title.html 中
<div class="showw">
<img id="hideDivOnClick" src="ddd.png"/>
</div>
And i include directive like this
我包括这样的指令
<div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div>
so when i click on image then this <div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div>parts gets remove from body. like remove element in Javascript. how i will achive this in angularJS?
所以当我点击图像时，这部<div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div>分会从身体上移除。就像在 Javascript 中删除元素一样。我将如何在 angularJS 中实现这一目标？
回答by Jay Shukla
Use below in your directive.
在您的指令中使用以下内容。
Directive
指示
app.directive("removeMe", function() {
return {
link:function(scope,element,attrs)
{
element.bind("click",function() {
element.remove();
});
}
}
});
HTML
HTML
<div class="showw" remove-me>
<img id="hideDivOnClick" src="ddd.png"/>
</div>
回答by hassassin
You can simply create a directive, that adds a function that will remove the html of the element. Then you can just stick it on an ng-click. I made a fiddle here: http://jsfiddle.net/qDhT9/
您可以简单地创建一个指令，添加一个函数来删除元素的 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>
Hope this helped!
希望这有帮助！
回答by Aparna
For clearing/removing html elements, we can use the following methods
对于清除/删除html元素，我们可以使用以下方法
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.empty(); //clears contents
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.remove(); //removes element
Reference : http://blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp
参考：http: //blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp
回答by David Brewer
A more robust adaptation of Aparna's answer, you can use the $document service which acts as a wrapper for the browser's 'window.document' object. So instead of accessing 'document' variable globally you can access the '$document' object as a dependency. This helps to make your code more testable.
对 Aparna 答案的更强大的改编，您可以使用 $document 服务，它充当浏览器的“window.document”对象的包装器。因此，您可以将 '$document' 对象作为依赖项访问，而不是全局访问 'document' 变量。这有助于使您的代码更具可测试性。
eg:
例如：
app.controller('exampleCtrl', function($scope, $document) {
$scope.deleteArticle = function(id) {
var articleRow = angular.element($document[0].querySelector('div[data-articleid="'+id+'"]'));
articleRow.remove();
};
});
