How to clear the layui tree

How to clear the layui tree

First create a tree box:

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>基本树</legend>
</fieldset>
 
<div style="display: inline-block; width: 180px; height: 210px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  
</div>

<fieldset class="layui-elem-field layui-field-title"   style="max-width:90%">
  <legend>基本树</legend>
</fieldset>
 
<div style="display: inline-block; width: 180px; height: 210px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  <ul id="demo1"></ul>
</div>
<script>
//Demo
layui.use([&#39;tree&#39;, &#39;layer&#39;], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称：&#39;+ item.name + &#39;<br>全部参数：&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
 }
        ]
  });
});
</script>

Add branches to the original trunk:

layui.use(['tree', 'layer'], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称：&#39;+ item.name + &#39;<br>全部参数：&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
           
          }
        ]
      }
      
    ]
  });

Add branches based on the previous ones:

layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称：&#39;+ item.name + &#39;<br>全部参数：&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 211
                
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

Add leaves based on the previous one:

layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称：&#39;+ item.name + &#39;<br>全部参数：&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 211
                
,children: [
                  {
                    name: &#39;树叶1&#39;
                    ,id: 2111
                  }, {
                    name: &#39;树叶2&#39;
                    ,id: 2112
                  }, {
                    name: &#39;树叶3&#39;
                    ,id: 2113
                  }
                ]
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

Add a clear button:

<button class="layui-btn">清空</button>

Click the clear button and call the click event to clear the tree

$(".layui-btn").click(function(){
$('ul li').remove();
});

Method/Step 2

Complete code :

  
  
  
  
  
  
  


            

  
基本树

 

  


 
<button class="layui-btn">清空</button>
           
          


<script>
//Demo
layui.use([&#39;tree&#39;, &#39;layer&#39;], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称：&#39;+ item.name + &#39;<br>全部参数：&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 211
                ,children: [
                  {
                    name: &#39;树叶1&#39;
                    ,id: 2111
                  }, {
                    name: &#39;树叶2&#39;
                    ,id: 2112
                  }, {
                    name: &#39;树叶3&#39;
                    ,id: 2113
                  }
                ]
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });
  
$(&quot;.layui-btn&quot;).click(function(){
$(&amp;#39;ul li&amp;#39;).remove();
});
  
});
</script>

For more technical articles related to Layui, please visit the Layui Framework Tutorial column to learn!

The above is the detailed content of How to clear the layui tree. For more information, please follow other related articles on the PHP Chinese website!