Soumen Roy
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(serviceli st) {
if( servicelist == null ) {
$(".serviceslist").append( "<br><p class=\"noservices\">No Services Registered</p>");
}
else {
console.log(servicelist);
$(".serviceslist").append( "<ul class=\"services\"><a>Serv ices</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.
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(serviceli
if( servicelist == null ) {
$(".serviceslist").append(
}
else {
console.log(servicelist);
$(".serviceslist").append(
var count = servicelist.length;
var i = 0;
for( i=0 ; i<count ; i++ ) {
$(".services").append("<li
}
}
}
__________________________
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You probably want to look at the .empty() JQuery function.
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
$('.servicelist').empty();
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
So when you click on the tab it should trigger his line of code followed by what you currently have.