javascript - 从对象生成的UL中添加和删除项目

单击该项目时，我试图从UL中删除该项目。但是，我也想在顶部显示该项目，然后在单击该项目时将其返回到列表。

如下面的屏幕快照所示，如果单击了项目1，则将其移到顶部并将其从要选择的项目列表中删除，然后在单击另一个项目时将其重新添加。



列表将如下所示：



我需要指出该项目已被选中，但也要从可用项目中将其删除以选择它，然后在单击另一个项目时将其重新添加。

这是一个有效的jsfiddle：

和我有的代码：

(function(){

    let array =
        [
            {"Item": "Select User", "ItemId": 0},
            {"Item": "Michael Jordan", "ItemId": 1},
            {"Item": "Robert Williamson", "ItemId": 2},
            {"Item": "Daniel Plainfield", "ItemId": 3}
        ];

    let nav = document.getElementById('nav');
    let ul = document.createElement('ul');
    ul.setAttribute("id", "menu");

    function generateList(array) {

        for(let i = 0; i < array.length; i ++){

            let li = document.createElement('li');
            let content = document.createTextNode(array[i].ItemId + " " + array[i].Item);

            li.appendChild(content);

            // Hide all except first item.
            if(i > 0){
                li.setAttribute('class', 'hide');
             }

            ul.appendChild(li);
        }

        return ul;
    }

    function bindEventToList(){

        var menu = document.getElementById('menu');

        var li = menu.getElementsByTagName('li');

        li[0].addEventListener('click', function(e){

            e.stopImmediatePropagation();

            // Skip the first li
            for(let i = 1; i < li.length; i ++){

                li[i].classList.toggle('hide');

                //Bind events to rest of li
                li[i].addEventListener('click', function(e){

                    e.stopImmediatePropagation();

                    li[0].innerText = "You Selected: "  + e.currentTarget.innerText;


                    for(let i = 1; i < li.length; i ++) {
                        li[i].classList.toggle('hide');
                    }

                }, false)
            }

        }, false);
    }

    nav.appendChild(generateList(array));
    bindEventToList();

})();

最佳答案

编辑：

    (function() {

      let array = [{
          "Item": "Select User",
          "ItemId": 0
        },
        {
          "Item": "Michael Jordan",
          "ItemId": 1
        },
        {
          "Item": "Robert Williamson",
          "ItemId": 2
        },
        {
          "Item": "Daniel Plainfield",
          "ItemId": 3
        }
      ];

      let nav = document.getElementById('nav');
      let ul = document.createElement('ul');
      ul.setAttribute("id", "menu");

      function generateList(array) {

        for (let i = 0; i < array.length; i++) {

          let li = document.createElement('li');
          let content = document.createTextNode(array[i].ItemId + " " + array[i].Item);

          li.appendChild(content);

          // Hide all except first item.
          if (i > 0) {
            li.setAttribute('class', 'hide');
          }

          ul.appendChild(li);
        }

        return ul;
      }



      function bindEventToList() {

        var menu = document.getElementById('menu');

        var li = menu.getElementsByTagName('li');

        var lastIndex = 0;

        li[0].addEventListener('click', function(e) {

          e.stopImmediatePropagation();

          // Skip the first li
          for (let i = 1; i < li.length; i++) {

            if (i !== lastIndex) {
              li[i].style.display = 'block';
            }

            //Bind events to rest of li
            li[i].addEventListener('click', function(e) {

              e.stopImmediatePropagation();

              li[0].innerText = "You Selected: " + e.currentTarget.innerText;

              li[i].style.display = 'none';

                            lastIndex = i;

              for (let j = 1; j < li.length; j++) {
                li[j].style.display = 'none';
              }

            }, false)
          }

        }, false);
      }

      nav.appendChild(generateList(array));
      bindEventToList();

    })();

第一次尝试：

快速而肮脏的解决方案：

e.path[0].parentNode.removeChild(e.path[0]);

放在某处
li[i].addEventListener('click', function(e) {功能。