Question

请不要使用jQuery代码，因为我想首先学习javascript。

我只是想尝试一下，我的html页面中有一个按钮，可以动态地将li项添加到ul。有这样的效果：

HTML：

<ul id="myList">
</ul>
<input id="myButton" value="Click Me" type="submit" onclick="addItem();"></input>

和addItem()的JS：

function addItem()
 {
  var l = document.getElementById("myList");  
  var today = new Date();
  var day2 = new Date();
  day2.setDate(today.getDate() + 30);
  var count = 1;

    while(today.valueOf() < day2.valueOf())
           {
            if(today.getDay() == 0)
                 //is it a sunday -- only add sundays...
                {
            var li = document.createElement('li');
            li.setAttribute('id', ['liID' + count]);  //set the id attribute
                    var month = today.getMonth();
                    var day = today.getDate();
                    var year = today.getFullYear();
                    var theDay = month + '/' + day + '/' + year + ' (Sunday)';
            li.innerHTML = theDay;
            l.appendChild(li);     //add the li to the ul
                }
            today.setDate(today.getDate() + 1) //increment the day
        count++;       
           }
 }

这很不错，但是，在每个订单项旁边，我还要添加一个超级链接来说明“删除”，这样如果用户点击它，它就会删除那个单独的li。我只是做document.createElement('a')吗？并通过.setAttribute设置其属性。但是，如何触发特定li的删除？这是我的尝试：

修改

 function addItem()
 {
  var l = document.getElementById("myList");  
  var today = new Date();
  var day2 = new Date();
  day2.setDate(today.getDate() + 30);
  var count = 1;


    while(today.valueOf() < day2.valueOf())
           {
            if(today.getDay() == 0)
                {
            var li = document.createElement('li');
            li.setAttribute('id', ['liID' + count]);
                    var month = today.getMonth();
                    var day = today.getDate();
                    var year = today.getFullYear();
                    var theDay = month + '/' + day + '/' + year + ' (Sunday)';
            li.innerHTML = theDay;
            l.appendChild(li);

            var a = document.createElement('a');
            a.setAttribute('href', '#');
            a.innerHTML = "Remove";
            a.onclick = function(e) {  
                                                var liNode;   
                        if (!e) var e = window.event;   
                        if (e.target) liNode = e.target;   
                        else if (e.srcElement) liNode = e.srcElement;   
                        if (liNode.nodeType == 3) 
                        { // defeat Safari bug        
                          liNode = liNode.parentNode;       
                        }   
                        // l refers to ul which you've an instance of already   
                        l.removeChild(liNode);
                                            }

                    li.appendChild(a);
                }
            today.setDate(today.getDate() + 1)
        count++;
           }
 }

但是当我点击href链接时，它不会删除任何内容......

Answer 1

使用类似：

var a = document.createElement('a');
a.onclick = function(e) { 
   // cross browser stuff to get the liNode
   var liNode;

   if (!e) var e = window.event;
   if (e.target) liNode = e.target.parentNode;
   else if (e.srcElement) liNode = e.srcElement.parentNode;
   if (liNode.nodeType == 3) { // defeat Safari bug
        liNode = liNode.parentNode.parentNode;
       }
   // l refers to ul which you've an instance of already
   l.removeChild(liNode);
}
li.appendChild(a);

Answer 2

是的，您可以使用a添加var anchor = document.createElement('a');。是的，您可以使用setAttribute或仅使用anchor.href = 'http://yourpath.com';添加属性。然后，您可以使用以下代码添加事件侦听器：

anchor.onclick = function(e) {
  // crossbrowser event handling
  e = e || window.event;
  var tagret = e.target || e.srcElement;
  // assuming you have appended anchor to li
  var li = tagret.parentNode;
  var ul = li.parentNode;
  ul.removeChild(li);
}

动态添加li，现在通过超链接动态删除它们？

修改

2 个答案: