removeClass & addClass jquery

Question

I am relatively new to jquery and try to solve the following issue

I want to build a tree diagram, cf.

When an item in the first category is clicked, the second category (in div #category_2) pops-up. The same for the 3rd category. Every subsequent click on category 1 or 2 should remove the appended 2nd and 3rd item and append the chosen item from the 2nd and 3rd category.

Here is what I tried at the example of opening an item in category 3 (=subMenu2):

function makeType(subMenu2, root) {
  if (typeof root === 'undefined') {
    root = $('#category_3');
  }

  var ul = $("<ul></ul>");

  if (root.children().length > 0) {
    root.removeClass(ul)
  }
 
  root.append(ul);

  for (var k = 0; k < subMenu2.length; k++) {
    var li = $("<li class='category-selection-list-item is-subleaf'></li>");
    ul.append(li);
    var a = $("<a href='#' data-param='" + array[array_i].subMenu[submenu_i].subMenu2[k].param + "'>" + array[array_i].subMenu[submenu_i].subMenu2[k].type + "</a>");
    li.append(a);
    console.log(k);
  }
}

Though the removeClass element stops adding further items, it does not delete previously added items. I tried to find a suitable answer in the forum, but this did not help. So, how can I fix this issue?

Answer 1

To remove the previously added items, you need to empty root.

if (root.children().length > 0) {
    root.removeClass('ul');
    root.empty();
}