javascript - 隐藏删除按钮并删除点击 JavaScript

Question

1. 我想在什么时候显示任务的标题onclick，它也给了我“删除” text(span)。当用户单击每个列表时，我尝试在不删除的情况下显示我的任务......但它不会工作......

2. 我还想在用户单击remove button.. 时删除每个列表。你能给我一些提示吗？我尝试了多种方法..但它不会工作:(

我附上了我的待办事项列表应用程序的图像。

我提前感谢它！

var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');

var addBtn = document.getElementById('add-btn');
var i;

var span = document.getElementsByTagName('span');

var listspan = document.getElementById('list-span');
list.addEventListener('click', activeItem);

function activeItem(event) {
  if (event.target.nodeName == 'LI') {
    document.getElementById("list-span").style.visibility = "";
    title.innerHTML = event.target.innerText;
    for (var i = 0; i < event.target.parentNode.children.length; i++) {
      event.target.parentNode.children[i].removeAttribute('class');
    }
    event.target.setAttribute('class', 'active');
  }
}


addBtn.addEventListener('click', function() {
  var txt = prompt('add task');
  list.innerHTML += '<li>' + txt + '<span>' + "REMOVE" + '</span>' + '</li>';
  list.addEventListener('click', activeItem);
});

<section class="container">


  <div class="header-div">
    <h1 id='title'>ADD A TASK</h1>
  </div>

  <div class="button-div">
    <button id="add-btn">ADD A TASK</button>
  </div>

  <div class="list-div">
    <ul id='list'>
      <li>Walk my dog<span id="list-span">remove</span></li>
      <li>Go grocery shopping<span id="list-span">remove</span></li>
      <li>Call mom<span id="list-span">remove</span></li>
      <li>Do laundry<span id="list-span">remove</span></li>
      <li>Call Jane<span id="list-span">remove</span></li>
      <li>Eat lunch<span id="list-span">remove</span></li>

    </ul>
  </div>
</section>

标签： javascripthtml