node.js 新元素添加和删除

Question

当我点击添加按钮时，在文本框中写入的文本应该添加到复选框上 当我点击删除按钮时，选中的项目应该被删除

当我点击添加按钮时，在文本框中写入的文本应该添加到复选框上 当我点击删除按钮时，选中的项目应该被删除

var ul=document.getElementById('list');
var li;

document.getElementById('add').addEventListener('click',add)
document.getElementById('remove').addEventListener('click',remove)

function remove(){
    //console.log('click remove')
    li=ul.children
    for(var i=0;i<li.length;i++){
        if (li[i].children[0].checked==1) 
            ul.removeChild(li[i])  
    }
}

function add(){
    // console.log('click add')
    var inputType=document.getElementById('input').value;
    var textnode=document.createTextNode('inputType')
    if (inputType==='') {
        return false
    } else {
        //create li
        li=document.createElement('li')

        //create checkbox
        var checkebox=document.createElement('input')
        checkebox.type='checkbox'
        checkebox.setAttribute('id','check')

        //create label
        var label=document.createElement('label')
        label.setAttribute('for','item')

        //add to webpages
        ul.appendChild(label)
        li.appendChild(checkbox)
        ul.appendChild(textnode)
        li.appendChild(label)
        ul.insertBefore(li,ul.childNodes[0])
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add_Remove</title>
</head>
<body>
    <div class="container">
        <input type="text" id="input" placeholder="Add Value"/><br>
        <button type="submit" id="add"> Add </button><br>
        <button type="submit" id="remove"> Remove </button>
    </div>
    <ul id="list">
        <li>
            <label><input type="checkbox" id="Music" />Music</label>
        </li>
        <li>
            <label><input type="checkbox" id="Cricket" />Cricket</label>
        </li>
        <li>
            <label><input type="checkbox" id="Mobile" />Mobile</label>
        </li>
    </ul>
    <script src="addRemove.js"></script>
</body>
</html>

帮我解决我的错误 什么是错误

Answer 1

希望这是您的固定 sn-p。

变化不大。首先，您应该在创建 textNode 时传递对 inputType 的引用，而不是字符串。

其次，您声明了“复选框”，但引用了“复选框”。 注意你的控制台错误。

var ul=document.getElementById('list');
var li;

document.getElementById('add').addEventListener('click',add)
document.getElementById('remove').addEventListener('click',remove)

function remove(){
    //console.log('click remove')
    li=ul.children
    for(var i=0;i<li.length;i++){
        if (li[i].children[0].checked==1) 
            ul.removeChild(li[i])  
    }
}

function add(){
    // console.log('click add')
    var inputType=document.getElementById('input').value;
    var textnode=document.createTextNode(inputType)
    if (inputType==='') {
        return false
    } else {
        //create li
        li=document.createElement('li')
        
        //create checkbox
        var checkebox=document.createElement('input')
        checkebox.type='checkbox'
        checkebox.setAttribute('id','check')

        //create label
        var label=document.createElement('label')
        label.setAttribute('for','item')

        //add to webpages
        li.appendChild(checkebox)
        ul.appendChild(label)
        li.appendChild(textnode)
        li.appendChild(label)
        ul.insertBefore(li,ul.childNodes[0])
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add_Remove</title>
</head>
<body>
    <div class="container">
        <input type="text" id="input" placeholder="Add Value"/><br>
        <button type="submit" id="add"> Add </button><br>
        <button type="submit" id="remove"> Remove </button>
    </div>
    <ul id="list">
        <li>
            <label><input type="checkbox" id="Music" />Music</label>
        </li>
        <li>
            <label><input type="checkbox" id="Cricket" />Cricket</label>
        </li>
        <li>
            <label><input type="checkbox" id="Mobile" />Mobile</label>
        </li>
    </ul>
    <script src="addRemove.js"></script>
</body>
</html>

Answer 2

两个按钮没有绑定事件：你需要在 HTML 上处理点击事件：

<button type="button" id="add" onclick="add()">Add</button><br />
<button type="button" id="remove" onclick="remove()">Remove</button>

或进入JS：

document.getElementById('add').addEventListener('click', add)
document.getElementById('remove').addEventListener('click', remove)

请注意，您的 JS 代码也不能正常工作。你需要修复它。

Answer 3

var ul = document.getElementById('list');
var li;

document.getElementById('add').addEventListener('click', add)
document.getElementById('remove').addEventListener('click', remove)

function remove() {
  console.log('click remove')
  li = Object.assign([], ul.children)
  const listLength = li.length;
  for (var i = 0; i < listLength; i++) {
    if (li[i].children[0].children[0].checked == true)
      ul.removeChild(li[i])
  }
}

function add() {
  console.log('click add')
  var inputType = document.getElementById('input').value;
  var textnode = document.createTextNode('inputType')
  if (inputType === '') {
    return false
  } else {
    //create li
    li = document.createElement('li')

    //create checkbox
    var checkebox = document.createElement('input')
    checkebox.type = 'checkbox'
    checkebox.textContent = inputType
    checkebox.setAttribute('id', inputType)

    //create label
    var label = document.createElement('label')
    label.setAttribute('for', 'item')
    label.innerHTML = inputType

    //add to webpages
    ul.appendChild(label)
    label.prepend(checkebox)
    //ul.appendChild(textnode)
    li.appendChild(label)
    ul.insertBefore(li, ul.childNodes[0])
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add_Remove</title>
</head>

<body>
  <div class="container">
    <input type="text" id="input" placeholder="Add Value" /><br>
    <button type="submit" id="add"> Add </button><br>
    <button type="submit" id="remove"> Remove </button>
  </div>
  <ul id="list">
    <li>
      <label><input type="checkbox" id="Music" />Music</label>
    </li>
    <li>
      <label><input type="checkbox" id="Cricket" />Cricket</label>
    </li>
    <li>
      <label><input type="checkbox" id="Mobile" />Mobile</label>
    </li>
  </ul>
  <script src="addRemove.js"></script>
</body>

</html>