html这样写为什么会报错,我只是想实现一个删除功能

savokiss
  • 6.2k

需求

  • 点击哪个li下的btn就删除哪个li

代码

  • 提示函数未定义
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>


<script>
    window.onload = function(){
      var oList = document.getElementById('fileList');
      function delNode(obj){
        oList.removeChild(obj.parentNode);
      };
    }
  </script>


</head>
<body>
    <ul id="fileList">
       <li>测试文字1<button onclick="delNode(this)">del</button></li>
       <li>测试文字2<button onclick="delNode(this)">del</button></li>
       <li>测试文字3<button onclick="delNode(this)">del</button></li>
       <li>测试文字4<button onclick="delNode(this)">del</button></li>
       <li>测试文字5<button onclick="delNode(this)">del</button></li>
       <li>测试文字6<button onclick="delNode(this)">del</button></li>
    </ul>
</body>
</html>

  • 正常运行
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>


<script>
      
  </script>


</head>
<body>
    <ul id="fileList">
       <li>测试文字1<button onclick="delNode(this)">del</button></li>
       <li>测试文字2<button onclick="delNode(this)">del</button></li>
       <li>测试文字3<button onclick="delNode(this)">del</button></li>
       <li>测试文字4<button onclick="delNode(this)">del</button></li>
       <li>测试文字5<button onclick="delNode(this)">del</button></li>
       <li>测试文字6<button onclick="delNode(this)">del</button></li>
    </ul>
    <script>
      var oList = document.getElementById('fileList');
      function delNode(obj){
        oList.removeChild(obj.parentNode);
      };
    </script>
</body>
</html>

疑问

  • 这是咋回事?
  • 一般这种删除都是咋写的咧?
回复
阅读 2.5k
4 个回答

把function移到window.onload之外

站在桌子上是没办法搬走桌子的

window.onload = function(){...}是在dom文档树加载完和所有文件加载完之后立即执行一个函数。当它执行完后,这个函数的执行环境就被销毁,保存在其中的所有变量和函数也会随之销毁。你的第一段程序,确实在页面加载完就执行了,但因为里面的oList function delNode(obj){}都是局部变量,执行完就销毁,所以虽然执行了,相当于什么都没做。如果非要用window.onload = function(){...}的话,可以这样写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <ul id="fileList">
       <li>测试文字1<button onclick="delNode(this)">del</button></li>
       <li>测试文字2<button onclick="delNode(this)">del</button></li>
       <li>测试文字3<button onclick="delNode(this)">del</button></li>
       <li>测试文字4<button onclick="delNode(this)">del</button></li>
       <li>测试文字5<button onclick="delNode(this)">del</button></li>
       <li>测试文字6<button onclick="delNode(this)">del</button></li>
    </ul>
    <script>
        window.onload = function(){
          var oList = document.getElementById('fileList');
          // 函数表达式,将这个函数赋值给一个全局变量,delNode就会一直保持在内存中了
          delNode = function (obj){ 
            oList.removeChild(obj.parentNode);
          };
        }
    </script> <!-- 顺便说一句<script>写到前面也可以,但一般写在</body>之前 -->
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏