问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
savokiss
    6.2k123951

    需求

    • 点击哪个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>

    疑问

    • 这是咋回事？
    • 一般这种删除都是咋写的咧？
    html
    阅读 3.9k
    4 个回答
    得票最新
    头像
    water_junket
      89131319
      ✓ 已被采纳

      把function移到window.onload之外

      头像
      Instrye
        2491718

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

        头像
        梦禅
          3.2k1111

          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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题