Удалить HTML-элемент при нажатии Angular js

Это моя директива. которые отображают один 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?

Ответ 1

Вы можете просто создать директиву, которая добавляет функцию, которая удалит 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>

Надеюсь, это помогло!

Ответ 2

Используйте ниже в своей директиве.

Директива

app.directive("removeMe", function($rootScope) {
      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>

Рабочий демонстрационный пример

Ответ 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

Ответ 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();
  };
});