Link to home
Start Free TrialLog in
Avatar of Soumen Roy
Soumen RoyFlag for India

asked on

Removing HTML elements using javascript

Hello,

I have the following javascript code that gets an array of data from a jquery function and generates a html list from the array, or shows a paragraph if the array is empty:
_______________________________________________________________________________________________
function showserviceslist(servicelist) {
      if( servicelist == null ) {      
            $(".serviceslist").append("<br><p class=\"noservices\">No Services Registered</p>");
      }
      else {
            console.log(servicelist);                              
            $(".serviceslist").append("<ul class=\"services\"><a>Services</a></ul>");

            var count = servicelist.length;
            var i = 0;

            for( i=0 ; i<count ; i++ ) {
                  $(".services").append("<li class=\"" + servicelist[i] + "\"><a>" + servicelist[i] + "</a></ul>");
            }
      }
}
_______________________________________________________________________________________________
The HTML corresponding to this function is:
_______________________________________________________________________________________________
<div class="servicesbody">
      <div class="serviceslist">
                                                                  
      </div>
_______________________________________________________________________________________________

Now the ajax query that sends data to "showserviceslist()" is linked to a dynamically generated tab list and is called every time a different tab is clicked. So, after every new click, the "div .serviceslist" needs to be emptied of all existing children such that the list or paragraph for the corresponding clicked tab is shown dynamically.

The question is how do I remove the children of "div .serviceslist"? The functions like ".removeChild()" are raising console alerts saying "removeChild() is not a function".

Any help is much welcome.

Thanks in advance.
ASKER CERTIFIED SOLUTION
Avatar of Elvio Lujan
Elvio Lujan
Flag of Argentina image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@hielo's comment will work for you. You need to remove all of the HTML from the within the <div class="serviceslist"></div> section and his code will do that for you every time.

So when you click on the tab it should trigger his line of code followed by what you currently have.
You probably want to look at the .empty() JQuery function.

$('.servicelist').empty();

Open in new window


Edit:
Duplicate of Elvio Lujan's post (https://www.experts-exchange.com/questions/28996427/Removing-HTML-elements-using-javascript.html?anchorAnswerId=41970121#a41970121) - which is the correct answer