removeClass& addClass jquery

时间:2017-12-21 01:02:02

标签: javascript jquery appendchild removechild

我对jquery比较新,并尝试解决以下问题

我想构建一个树形图,参见

enter image description here

单击第一个类别中的项目时,会弹出第二个类别(在div#category_2中)。第3类也是如此。对类别1或2的每次后续点击都应删除附加的第2和第3项,并附加第2和第3类中的所选项目。

以下是我在打开类别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);
  }
}

虽然removeClass元素会停止添加更多项目,但它不会删除以前添加的项目。我试图在论坛中找到合适的答案,但这没有帮助。那么,我该如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

要删除以前添加的项目,您需要清空root

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

答案 1 :(得分:1)

addClass("className") 
removeClass("className")

如果你想隐藏某个节点,只需使用它:

 $("#someNode").hide()