Angular delete item not working?

Question

I have a service that is responsible for displaying the loading bar on the screen. I add the loading bar dynamically as follows

coreModule.provider('$loading', function () { this.$get = ['$document', function ($document) { var element = angular.element('<div id="loading" class="loading">' + '<img src="../styling/img/loading.gif" alt="loading .... ">' + '</div>'); return { inProgress:function (message) { $document.find('body').append(element); }, finish:function () { // $document.find('body').remove(element); <- does not work // $document.find('body').remove('#loading'); <- neither this one does !! } } }]; }); 

However, the completion function generally works. It removes an element from the body. Any ideas?

Answer 1

You can use element.remove() - see the http://docs.angularjs.org/api/angular.element jQueryLight methods available.