小編給大家分享一下layui樹如何清空，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。

layui樹怎么清空

首先創(chuàng)建一個(gè)樹框：

  
基本樹

 

  

  
基本樹

 

  

在原有的樹干上添加樹杈：

layui.use(['tree', 'layer'], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新選項(xiàng)卡打開（比如節(jié)點(diǎn)返回href才有效）
    ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào)
      layer.msg('當(dāng)前節(jié)名稱：'+ item.name + '
全部參數(shù)：'+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //節(jié)點(diǎn)
      {
        name: '樹干'
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: '樹杈1'
            ,id: 21
            ,spread: true
            
          }, {
            name: '樹杈2'
            ,id: 22
           
          }
        ]
      }
      
    ]
  });

再在之前的基礎(chǔ)上添加樹枝：

layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新選項(xiàng)卡打開（比如節(jié)點(diǎn)返回href才有效）
    ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào)
      layer.msg('當(dāng)前節(jié)名稱：'+ item.name + '
全部參數(shù)：'+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //節(jié)點(diǎn)
      {
        name: '樹干'
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: '樹杈1'
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: '樹枝'
                ,id: 211
                
              }
            ]
          }, {
            name: '樹杈2'
            ,id: 22
            ,children: [
              {
                name: '樹枝'
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

再在之前的基礎(chǔ)上添加樹葉：

layui.tree({
    elem: '#demo1' //指定元素
    ,target: '_blank' //是否新選項(xiàng)卡打開（比如節(jié)點(diǎn)返回href才有效）
    ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào)
      layer.msg('當(dāng)前節(jié)名稱：'+ item.name + '
全部參數(shù)：'+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //節(jié)點(diǎn)
      {
        name: '樹干'
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: '樹杈1'
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: '樹枝'
                ,id: 211
                
,children: [
                  {
                    name: '樹葉1'
                    ,id: 2111
                  }, {
                    name: '樹葉2'
                    ,id: 2112
                  }, {
                    name: '樹葉3'
                    ,id: 2113
                  }
                ]
              }
            ]
          }, {
            name: '樹杈2'
            ,id: 22
            ,children: [
              {
                name: '樹枝'
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

添加個(gè)清空的按鈕：

清空

點(diǎn)擊清空按鈕，調(diào)用點(diǎn)擊事件清除樹

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

方法/步驟2

完整代碼：

  
  
  
  
  
  
  


            

  
基本樹

 

  


 
清空
           
          

看完了這篇文章，相信你對(duì)layui樹如何清空有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！