javascript - 关于JS的问题，新人求大神帮看看...-PHP中文网问答

我想要的效果是
点击添加时能向指定的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 op1 = document.getElementById('op_1');
      var oul1 = op1.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>';
        //op1.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>
    #op_1 ul{
      width: 300px;
      height: 500px;
      background-color: blueviolet;
    }
  </style>
</head>

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

</html>

<!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> #op_1 ul{ width: 300px; height: 500px; background-color: blueviolet; } </style> </head> <body> <input type="text" value="" id="otex" /> <input type="button" value="添加" id="odin" /> <p id="op_1"> <ul></ul> <ul></ul> <ul></ul> </p> </body> </html>

全部回复(6)

巴扎黑2017-04-10 17:16:48 6楼

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

赞 +0

添加回复

黄舟2017-04-10 17:16:48 5楼

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

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

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

ringa_lee2017-04-10 17:16:48 4楼

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

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

PHP中文网2017-04-10 17:16:48 3楼

问题原因：
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，并且指定对应执行的方法。

天蓬老师2017-04-10 17:16:48 2楼

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

PHP中文网2017-04-10 17:16:48 1楼

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