Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to empty the layui tree, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

How to clear the layui tree

First create a tree box:

Basic tree / / Demolayui.use (['tree',' layer'], function () {var layer = layui.layer, $= layui.jquery) Layui.tree ({elem:'# demo1' / / specify element, target:'_ blank' / / whether the new tab is opened (for example, if the node returns href), click: function (item) {/ / Click the node to call back layer.msg ('current section name:' + item.name +')

All parameters:'+ JSON.stringify (item)); console.log (item);}, nodes: [/ / node {name: 'trunk', id: 2, spread: tree}]});})

Add branches to the original trunk:

Layui.use (['tree',' layer'], function () {var layer = layui.layer, $= layui.jquery; layui.tree ({elem:'# demo1' / / specify element, target:'_ blank' / / whether the new tab is opened (for example, if the node returns href), click: function (item) {/ / Click the node callback layer.msg ('current section name:' + item.name +')

All parameters:'+ JSON.stringify (item)); console.log (item) }, nodes: [/ / Node {name: 'trunk', id: 2, spread: true, children: [{name: 'branch 1', id: 21, spread: true}, {name: 'branch 2' Id: 22}]}]})

Then add branches to the previous one:

Layui.tree ({elem:'# demo1' / / specify element, target:'_ blank' / / whether the new tab is opened (for example, if the node returns href), click: function (item) {/ / Click the node to call back layer.msg ('current section name:' + item.name +')

All parameters:'+ JSON.stringify (item)); console.log (item) }, nodes: [/ / Node {name: 'trunk', id: 2, spread: true, children: [{name: 'branch 1', id: 21, spread: true Children: [{name: 'branch', id: 211}]}, {name: 'branch 2', id: 22 Children: [{name: 'branches', id: 221}]})

Then add leaves to the previous one:

Layui.tree ({elem:'# demo1' / / specify element, target:'_ blank' / / whether the new tab is opened (for example, if the node returns href), click: function (item) {/ / Click the node to call back layer.msg ('current section name:' + item.name +')

All parameters:'+ JSON.stringify (item)); console.log (item) }, nodes: [/ / Node {name: 'trunk', id: 2, spread: true, children: [{name: 'branch 1', id: 21, spread: true Children: [{name: 'branches', id: 211, children: [{name: 'leaves 1', id: 2111} {name: 'leaves 2', id: 2112}, {name:' leaves 3', id: 2113}]} {name: 'branch 2', id: 22, children: [{name:' branch', id: 221}]})

Add a clear button:

Empty

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

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

Method / step 2

Complete code:

Layui basic tree empties / / Demolayui.use (['tree',' layer'], function () {var layer = layui.layer, $= layui.jquery) Layui.tree ({elem:'# demo1' / / specify element, target:'_ blank' / / whether the new tab is opened (for example, if the node returns href), click: function (item) {/ / Click the node to call back layer.msg ('current section name:' + item.name +')

All parameters:'+ JSON.stringify (item)); console.log (item) }, nodes: [/ / Node {name: 'trunk', id: 2, spread: true, children: [{name: 'branch 1', id: 21, spread: true Children: [{name: 'branches', id: 211, children: [{name: 'leaves 1', id: 2111} {name: 'leaves 2', id: 2112}, {name:' leaves 3', id: 2113}]} {name: 'branch 2', id: 22, children: [{name:' branch', id: 221}]}) (".layui-btn") .click (function () {$('ul li'). Remove ();}). Thank you for reading this article carefully. I hope the article "how to clear the layui Tree" shared by the editor will be helpful to you. At the same time, I also hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.