<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { background: blue } #boxs { background: red } #boxs div { border: 1px solid black; width: 100px; height: 100px; background: gray } </style> </head> <body> <div id="box"> <div id="boxs"> <div></div> <div></div> <div></div> </div> </div> <button id="button">删除 </button> </body> <script> var f = document.getElementById("box"); var childs = f.childNodes; console.log(length) var b = document.getElementById("button"); b.onclick = function() { for (var i = childs.length - 1; i >= 0; i--) { f.removeChild(childs[i]); } } </script> </html>