Node.js New Element Add And Remove
When I click on the add button, the text written in textbox should be added on the checkbox And when I click on the remove button, the checked item should be removed When I click o
Solution 1:
var ul = document.getElementById('list');
var li;
document.getElementById('add').addEventListener('click', add)
document.getElementById('remove').addEventListener('click', remove)
functionremove() {
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])
}
}
functionadd() {
console.log('click add')
var inputType = document.getElementById('input').value;
var textnode = document.createTextNode('inputType')
if (inputType === '') {
returnfalse
} else {
//create li
li = document.createElement('li')
//create checkboxvar checkebox = document.createElement('input')
checkebox.type = 'checkbox'
checkebox.textContent = inputType
checkebox.setAttribute('id', inputType)
//create labelvar 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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Add_Remove</title></head><body><divclass="container"><inputtype="text"id="input"placeholder="Add Value" /><br><buttontype="submit"id="add"> Add </button><br><buttontype="submit"id="remove"> Remove </button></div><ulid="list"><li><label><inputtype="checkbox"id="Music" />Music</label></li><li><label><inputtype="checkbox"id="Cricket" />Cricket</label></li><li><label><inputtype="checkbox"id="Mobile" />Mobile</label></li></ul><scriptsrc="addRemove.js"></script></body></html>
Solution 2:
Here is your fixed snippet hopefully.
Few changes. First, you should pass a reference to inputType when creating a textNode, not a string.
Second, you were declarating "checkebox", but referencing "checkbox". Pay attention to your console errors.
var ul=document.getElementById('list');
var li;
document.getElementById('add').addEventListener('click',add)
document.getElementById('remove').addEventListener('click',remove)
functionremove(){
//console.log('click remove')
li=ul.childrenfor(var i=0;i<li.length;i++){
if (li[i].children[0].checked==1)
ul.removeChild(li[i])
}
}
functionadd(){
// console.log('click add')var inputType=document.getElementById('input').value;
var textnode=document.createTextNode(inputType)
if (inputType==='') {
returnfalse
} else {
//create li
li=document.createElement('li')
//create checkboxvar checkebox=document.createElement('input')
checkebox.type='checkbox'
checkebox.setAttribute('id','check')
//create labelvar 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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Add_Remove</title></head><body><divclass="container"><inputtype="text"id="input"placeholder="Add Value"/><br><buttontype="submit"id="add"> Add </button><br><buttontype="submit"id="remove"> Remove </button></div><ulid="list"><li><label><inputtype="checkbox"id="Music" />Music</label></li><li><label><inputtype="checkbox"id="Cricket" />Cricket</label></li><li><label><inputtype="checkbox"id="Mobile" />Mobile</label></li></ul><scriptsrc="addRemove.js"></script></body></html>
Solution 3:
The two buttons was not bind to event: you need to handle the click event on HTML:
<button type="button" id="add" onclick="add()">Add</button><br />
<buttontype="button"id="remove"onclick="remove()">Remove</button>
or into the JS:
document.getElementById('add').addEventListener('click', add)
document.getElementById('remove').addEventListener('click', remove)
Please, not also that your JS code not work property. You need to fix it.
Post a Comment for "Node.js New Element Add And Remove"