如何创建一个函数来删除我的网页的JavaScript中的项目？_Javascript_Dom

如何创建一个函数来删除我的网页的JavaScript中的项目？

javascript dom

如何创建一个函数来删除我的网页的JavaScript中的项目？,javascript,dom,Javascript,Dom,我有一个HTML页面，如下所示： <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co

我有一个HTML页面，如下所示：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Add/Delete</title>
  </head>

  <body>
    <h1>List of Items</h1>
    <main>
      <ul id="items"></ul>
      <input type="text" id="newText" />
      <input type="button" value="Add" onclick="addItem()" />
    </main>
    <script src="./app3.js"></script>
  </body>
</html>

    let list = document.querySelector('#items');
    let input = document.getElementById('newText');
    // create Li element 
    let li = document.createElement('li');

    // set the li element text to be the input element value plus a space
    // let text = list.value + ' ';
    // li.innerText = list.value 
    // li.innerText = list.value 

    li.innerText = input.value + ' ';


    // create a tag 

    let a = document.createElement('a');
    console.log(a.nodeName); // ohh ok
    // set the a element text to be '[Delete]'

    a.innerText = '[Delete]';
    // console.log(a);
    // set the a element href attribute to #

    a.setAttribute('href', '#');
    // append the a element to the li element 

    li.appendChild(a);

    // console.log(li);
    // appent the li element to the list element

    list.appendChild(li)
    // clear the input field 

    input.value = '';

    // let x = document.getElementById('a');

    // console.log(x.nodeName);
    
}
function deleteItem(e) {
// check if the nodeName is 'A' 


// let a = doument.getElementById('a')


// if it is true remove the parent Element

}

我的问题是，是的，我的addItem函数起作用，但我的delete item函数不起作用。我怎样才能让它工作？我对删除和“检查nodename是否为A”的理解感到困惑。我知道父元素可以是UL，因为子元素将是列表项。但是如果我检查nodeName是否是A，那么这意味着什么？请提供帮助。

您需要将单击事件侦听器添加到

元素中

在

a.setAttribute（'href'，'#'）下添加行a.addEventListener（'click'，deleteItem，{passive:true，once:true}）
passive
选项使此侦听器成为非滚动阻塞（记不起正确的术语），而one:true在第一次触发后删除侦听器。
最好的做法是删除不需要的事件侦听器
然后在delete函数中执行此操作
function deleteItem(e) {
  e.preventDefault(); /// stops default anchor behaviour('href');
  let listItem = e.currentTarget.parentElement; /// selects the parent of your delete anchor
  listItem.remove(); /// removes the parent from DOM
}

就是这样=）
您需要向
元素添加一个单击事件侦听器
在a.setAttribute（'href'，'#'）下添加行a.addEventListener（'click'，deleteItem，{passive:true，once:true}）
passive
选项使此侦听器成为非滚动阻塞（记不起正确的术语），而one:true在第一次触发后删除侦听器。
最好的做法是删除不需要的事件侦听器
然后在delete函数中执行此操作
function deleteItem(e) {
  e.preventDefault(); /// stops default anchor behaviour('href');
  let listItem = e.currentTarget.parentElement; /// selects the parent of your delete anchor
  listItem.remove(); /// removes the parent from DOM
}

就这样=）
嗨！为什么要使用
标记来删除按钮？嗨！为什么要使用
标记作为删除按钮？