问答博客资讯标签用户活动
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

关于JS的问题，新人求大神帮看看...

头像
平凡__
    33054465

    我想要的效果是
    点击添加时能向指定的UI里添加LI；
    添加好LI后，点击LI里面的删除按钮。删除刚刚添加的这个LI。
    下面是我的代码求大神帮看一下谢谢哈

    <!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <tilte></tilte>
  <script>
    window.onload = function() {
      var oinpu = document.getElementById('odin');
      var otext = document.getElementById('otex');
      var odiv1 = document.getElementById('odiv_1');
      var oul1 = odiv1.getElementsByTagName('ul')[0];
      var oa1 = oul1.getElementsByTagName('a');
      oinpu.onclick = function() {
        var oli1 = document.createElement('li');
        var oli2 = oul1.getElementsByTagName('li');
        oli1.innerHTML = otext.value + '<a href="javascript:;">删除</a>';
        //odiv1.appendChild(oli1);
        if (oli2.length > 0) {
          oul1.insertBefore(oli1, oli2[0]);
        } else {
          oul1.appendChild(oli1);
        }
      };
      //
      //点击删除时删除刚刚添加的LI
      for(var i=0;i<oa1.length;i++){
        oa1[i].onclick = function(){
          alert('这是测式');
          oul1.removeChild(this.parentNode);
        }
      };
      
    };

  </script>
  
  <style>
    #odiv_1 ul{
      width: 300px;
      height: 500px;
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <input type="text" value="" id="otex" />
  <input type="button" value="添加" id="odin" />
  <div id="odiv_1">
    <ul></ul>
    <ul></ul>
    <ul></ul>
  </div>
</body>

</html>
    javascript
    阅读 3.2k
    6 个回答
    得票最新
    头像
    G_Koala_C
      5.1k645133

      不太懂啊，不过for循环不应该放到onclick方法里边么？把html节点当做参数传进function。

      头像
      李卫
        222126
        window.onload = function() {
    var oinpu = document.getElementById('odin');
    var otext = document.getElementById('otex');
    var odiv1 = document.getElementById('odiv_1');
    var oul1 = odiv1.getElementsByTagName('ul')[0];
    var oa1 = oul1.getElementsByTagName('a');
    oinpu.onclick = function() {
        var oli1 = document.createElement('li');
        var oli2 = oul1.getElementsByTagName('li');
        oli1.innerHTML = otext.value + '<a href="javascript:;">删除</a>';
        //odiv1.appendChild(oli1);
        if (oli2.length > 0) {
            oul1.insertBefore(oli1, oli2[0]);
        } else {
            oul1.appendChild(oli1);
        }
        //点击删除时删除刚刚添加的LI
        for(var i=0; i < oa1.length; i++){
            (function(j) {
                oa1[j].onclick = function(){
                    alert('这是测式');
                    oul1.removeChild(this.parentNode);
                }
            })(i);
        };
    };
};

        先放上根据题主代码改正之后可以实现需求的代码。
        主要是两个问题。
        第一：我们应该保证在添加了该元素之后再绑定点击事件，所以不能直接在最下面写上绑定事件，否则永远都是没有绑定成功的，因为oa1从运行就获取的是一个空的元素集合，然后相当于给一个空的元素集合进行绑定。
        第二：老问题了，就是闭包，所以我使用

        (function(j) {
     oa1[j].onclick = function(){
     alert('这是测式');
     oul1.removeChild(this.parentNode);
  }
})(i);

        的方式把i传了进去，关于闭包的详细情况，题主可以百度或者google一下。

        头像
        Mure
          1671712

          执行顺序的问题，你原本写的是[添加]与[遍历]是同时进行，所以添加的没有被遍历到，正确的方法应该是：在[添加]这个动作完成后，再执行遍历：

          for(var i=0;i<oa1.length;i++){..}
          这句放在
          oinpu.onclick = function() {..}
          里面即可

          头像
          xu
            311
            新手上路，请多包涵

            问题原因：
            window.onload会在页面加载完成后执行，由于此时页面的ul标签里面没有<li></li>标签，所以
            var oa1 = oul1.getElementsByTagName('a'); 中 oa1 = [];
            代码顺序执行到

            for(var i=0;i<oa1.length;i++)

            时，根据 i < oa1.length 条件，for中的内容会执行0次。

            解决办法有多个：
            办法1，在oinpu.onclick中进行a标签onclick事件的绑定；
            办法2，在添加a标签时，就指定a标签的onclick事件，即是在a标签属性中添加onclick，并且指定对应执行的方法。

            头像
            小窝
              3711715

              建议使用事件代理的方法绑定，可以避免用到闭包

              头像
              P酱
                3.2k21021

                习惯用addEventListener，不过和你用onxx的方式本质是一样的。
                记得用委托是最好的。

                <!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <tilte></tilte>
        <script>
            window.addEventListener('load', function(){
                    var ul = document.getElementsByTagName('ul')[0]
                        ,text = document.getElementById('otex')
                    document.getElementById('odin').addEventListener('click', function (e) {
                        var li = document.createElement('li')
                        li.innerHTML =  text.value + '<a href="javascript:;">删除</a>'
                        ul.appendChild(li)
                    })
                    ul.addEventListener('click', function (e) {
                        if(e.target && e.target.nodeName == 'A')
                            ul.removeChild(e.target.parentNode)
                    })
                })
        </script>
        <style>
            #odiv_1 ul{
                  width: 300px;
                  height: 500px;
                  background-color: blueviolet;
                }
        </style>
    </head>
    <body>
        <input type="text" value="" id="otex" />
        <input type="button" value="添加" id="odin" />
        <div id="odiv_1">
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </div>
    </body>
</html>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题