web-dev-qa-db-fra.com

supprimer l'élément HTML au clic dans js angulaire

Ceci est ma directive. qui affichent une div sur le corps.

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

});

Et dans title.html

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

Et j'inclus une directive comme celle-ci

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

alors, quand je clique sur l'image, ce <div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div> partie est retiré du corps. comme remove élément en Javascript. comment vais-je y arriver en angularJS?

htmlangularjs
11
Proxy_Server

Vous pouvez simplement créer une directive, qui ajoute une fonction qui supprimera le code HTML de l'élément. Ensuite, vous pouvez simplement le coller sur un clic. J'ai fait un violon ici: 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>

J'espère que cela a aidé!

15
hassassin

Utilisez ci-dessous dans votre directive.

Directive 

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

22
Jay Shukla

Pour effacer/supprimer des éléments HTML, nous pouvons utiliser les méthodes suivantes

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

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

Référence: http://blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp

9
Aparna

Une adaptation plus robuste de la réponse d'Aparna, vous pouvez utiliser le service $ document qui agit comme un wrapper pour l'objet 'window.document' du navigateur. Ainsi, au lieu d'accéder à la variable 'document' globalement, vous pouvez accéder à l'objet '$ document' en tant que dépendance. Cela aide à rendre votre code plus testable.

par exemple:

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