使用DOM Manipulation JS将项目移动到不同的列表

Question

我正在使用JavaScript ES5创建类似GMAIL功能的东西（我只使用const和let，就是它，其余的是ES5）。

所以我设法创建列表功能，所有工作除了当我选择项目并将它们移动到不同的列表时，它们会丢失任何功能，我不能对它们做任何事情。

我相信我需要使用querySelectorAll来获取所有列表，但这不起作用。不知道我该怎么做。

我想我需要选择所有列表，然后循环它们以添加交互性。

CodePen：https://codepen.io/Aurelian/pen/dJryrX?editors=1010

JS：

window.onload = function() {

  //////////////////////////////////
    // VARIABLES
    //////////////////////////////////
  // Form
  const form = document.querySelector('#registrar');
  const input = form.querySelector('input');

  // Lists
  const partyList = document.querySelector('.party-lists');
  const partyInvitedList = document.querySelector('#list-invited')
  const partyGoingList = document.querySelector('#list-going');
  const partyNotSure = document.querySelector('#list-not-sure');
  const partyNotGoing = document.querySelector('#list-not-going');

  // List Options
  const listOptions = document.querySelector('.list-options');
  const btnMoveToGoing = document.querySelector('.btnMoveGoing');
  const btnMoveToNotSure = document.querySelector('.btnMoveNotSure');
  const btnMoveToNotGoing = document.querySelector('.btnMoveNotGoing');
  const btnDeleteSelected = document.querySelector('.btnDeleteSelected');


  //////////////////////////////////
    // FUNCTIONS
    //////////////////////////////////
  function createLI(text) {
    const li = document.createElement('li');
    const span = document.createElement('span');  
    span.textContent = text;
    li.appendChild(span);
    const label = document.createElement('label');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    label.appendChild(checkbox);
    li.appendChild(label);  
    const editButton = document.createElement('button');
    editButton.textContent = 'edit';
    li.appendChild(editButton);
    const removeButton = document.createElement('button');
    removeButton.textContent = 'remove';
    li.appendChild(removeButton);
    return li;
  }


  //////////////////////////////////
    // EVENT HANDLERS
    //////////////////////////////////
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLI(text);
    partyInvitedList.appendChild(li);
  });

  partyList.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
      const button = e.target;
      const li = button.parentNode;
      const ul = li.parentNode;
      if (button.textContent === 'remove') {
        ul.removeChild(li);
      } else if (button.textContent === 'edit') { 
        const span = li.firstElementChild;
        const input = document.createElement('input');
        input.type = 'text';
        input.value = span.textContent;
        li.insertBefore(input, span);
        li.removeChild(span);
        button.textContent = 'save';
      } else if (button.textContent === 'save') { 
        const input = li.firstElementChild;
        const span = document.createElement('span');
        span.textContent = input.value;
        li.insertBefore(span, input);
        li.removeChild(input);
        button.textContent = 'edit';
      }
    }
  });

  listOptions.addEventListener('click', function(e) {

    partyList.querySelectorAll('*:checked').forEach(function (listItems) {
      const button = e.target;
      var items = listItems.parentNode.parentNode;
      if(button.className === 'btnMoveGoing') {
          partyGoingList.appendChild(items);
          items.checked = false;
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnMoveNotSure'){
          partyNotSure.appendChild(items);
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnMoveNotGoing'){
          partyNotGoing.appendChild(items);
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnDeleteSelected'){
         listItems.parentNode.parentNode.remove();
         var item = listItems;
         item.checked = false;
      } 
    });

  });


}

HTML：

    <div class="top">
<form id="registrar">
<input type="text" name="name" placeholder="Invite Someone">
<button type="submit" name="submit" value="submit">Submit</button>
</form>

<div class="list-options">
<button class="btnMoveGoing">Move to Going</button>
<button class="btnMoveNotSure">Move to Not Sure</button>
<button class="btnMoveNotGoing">Move to Not Going</button>
<button class="btnDeleteSelected">Delete Selected</button>
</div>

</div><!-- /top -->

<div class="col">
<h3>Invited</h3>
<ul id="list-invited" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Going</h3>
<ul id="list-going" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Not Sure</h3>
<ul id="list-not-sure" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Not Going</h3>
<ul id="list-not-going" class="party-lists">

</ul>
</div>