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

单击某个项目时，我正在尝试从UL中删除该项目。但是，我也希望在顶部显示该项目，然后在单击该项目时将其返回列表

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

该列表将如下所示：

我需要指出该项目已被选中，但也需要将其从可用项目中删除以进行选择，然后在单击其他项目时将其添加回

以下是一份工作报告：

我的代码是：

(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();

})();

（函数（）{
let数组=
[
{“项”：“选择用户”，“项ID”：0}，
{“项目”：“迈克尔·乔丹”，“项目ID”：1}，
{“项目”：“罗伯特·威廉姆森”，“项目ID”：2}，
{“Item”：“Daniel Plainfield”，“ItemId”：3}
];
让nav=document.getElementById（'nav'）；
设ul=document.createElement（'ul'）；
设置属性（“id”、“菜单”）；
函数生成器列表（数组）{
for（设i=0；i0）{
li.setAttribute（'class'，'hide'）；
}
ul.儿童（li）；
}
返回ul；
}
函数bindEventToList（）{
var menu=document.getElementById（'menu'）；
var li=menu.getElementsByTagName（'li'）；
li[0]。addEventListener（'click'，函数（e）{
e、 停止即时复制（）；
//跳过第一个李
for（设i=1；i

编辑：

    (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();

    })();

把它放在某个地方

---

li[i].addEventListener（'click'，函数（e）{

函数。

您不能直接从dom中删除节点，而不是使用类吗？但是，当单击另一项时，如何将其添加回？隐藏/显示它。如果列表已修复，我认为没有理由为您自己创建额外的工作。我不确定是否理解，因为您的JSFIDLE似乎已经在执行您想要的操作。当您单击顶部，元素被正确插入。是否一直显示列表，但缺少元素（在“顶部”的数字），我想我理解：“列表将如下所示”是你观察到的，而不是你想要的。你想要的是列表中只包含Robert和Daniel。对吗？我应该提到我想切换删除的项目，这意味着当单击另一个项目时，我想重新添加删除的项目。技术上我也可以这样做：

menu.removeChild（e.currentTarget）

但删除很容易，将其添加回原来的位置就很难了。@Asynchronous:我编辑了我的答案。这应该行得通。；-）感谢您的努力。这会在IE中引发一个错误，因为4处的索引为空。

无法获取未定义或空引用的属性“style”

您确定吗？我在JSFIDLE中使用chrome、firefox和edge进行了尝试。它可以正常工作。如果错误仅出现在特定的IE版本中，我想这应该是另一个问题。它不会出现错误ot在IE 11中工作。但是，我只是将受影响的行包装在if语句中以解决问题。

if（li[I]！==未定义）{li[I].style.display='none'；}

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