本文介绍了node.js新元素的添加和删除的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我单击添加"按钮时,应将在文本框中编写的文本添加到复选框中然后,当我单击删除"按钮时,应删除选中的项目
When I click on the add button, the text written in textbox should be added on the checkboxAnd when I click on the remove button, the checked item should be removed
当我单击添加"按钮时,应将在文本框中编写的文本添加到复选框中然后,当我单击删除"按钮时,应删除选中的项目
When I click on the add button, the text written in textbox should be added on the checkboxAnd when I click on the remove button, the checked item should be removed
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>
帮助我解决我的错误什么是错误
help me to solve my mistakewhat is mistake
推荐答案
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>
这篇关于node.js新元素的添加和删除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!