How to clear the layui tree-Layui Tutorial-php.cn

How to clear the layui tree

藏色散人

Release： 2019-08-01 16:35:31

Original

3960 people have browsed it

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>

Copy after login

How to clear the layui tree

<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>

Copy after login

How to clear the layui tree

Add branches to the original trunk:

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
            
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
           
          }
        ]
      }
      
    ]
  });

Copy after login

How to clear the layui tree

Add branches based on the previous ones:

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
                
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

Copy after login

How to clear the layui tree

Add leaves based on the previous one:

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
              }
            ]
          }
        ]
      }
      
    ]
  });

Copy after login

How to clear the layui tree

Add a clear button:

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

Copy after login

How to clear the layui tree

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

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

Copy after login

How to clear the layui tree

Method/Step 2

Complete code :




  
  layui
  
  
  
  
  



            

  基本树

 

  

 
<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>

Copy after login

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!