This shouldn't be difficult, but after reading lots of examples I still cannot find the answer, or figure it out, at least in any sort of elegant way. I have read a lot of answers on SO, like this and this and this. Strangely enough I couldn't find anything to help.

What am I doing and trying to achieve?

I am calling an API which is returning a set of chords and lyrics. This works perfectly when I call the API once, but when I search again the chords and lyrics are appended at the end of the div. Can anyone advise on what angular method or solution I should use to remove content from the div before it is populated with new data?

Here is the code I am currently using:

$scope.getSongs = function(){

    $http({
        url: '/?query=' + $scope.song,
        dataType: 'json',
        method: 'GET'
    }).success(function(response){
        var myEl = angular.element( document.querySelector( '#chords' ) ); 

      ////something needs to go here...../////

        myEl.append(response.objects[0].body_chords_html);

    });

This shouldn't be difficult, but after reading lots of examples I still cannot find the answer, or figure it out, at least in any sort of elegant way. I have read a lot of answers on SO, like this and this and this. Strangely enough I couldn't find anything to help.

What am I doing and trying to achieve?

I am calling an API which is returning a set of chords and lyrics. This works perfectly when I call the API once, but when I search again the chords and lyrics are appended at the end of the div. Can anyone advise on what angular method or solution I should use to remove content from the div before it is populated with new data?

Here is the code I am currently using:

$scope.getSongs = function(){

    $http({
        url: 'http://api.guitarparty./v2/songs/?query=' + $scope.song,
        dataType: 'json',
        method: 'GET'
    }).success(function(response){
        var myEl = angular.element( document.querySelector( '#chords' ) ); 

      ////something needs to go here...../////

        myEl.append(response.objects[0].body_chords_html);

    });

• javascript
• angularjs

• If you want to replace the content use myEl.html() instead of append. It's appending because you are using append. docs.angularjs/api/ng/function/angular.element – ribsies Commented May 7, 2015 at 17:39
• cheers @ribsies - worked a treat also – Paul Fitzgerald Commented May 7, 2015 at 17:40

2 Answers 2

How about:

myEl.empty()

Taken from SO Question

What is your api returning, an array of objects? Try this

$scope.getSongs = function(){

    $http({
        url: 'http://api.guitarparty./v2/songs/?query=' + $scope.song,
        dataType: 'json',
        method: 'GET'
    }).success(function(response){
        var myE1 = [];
        var myEl = angular.element( document.querySelector( '#chords' ) ); 

      ////something needs to go here...../////

        myEl.append(response.objects[0].body_chords_html);

    });