var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list=document.querySelectorAll("li")[0];
function inputLength(){
return input.value.length;
}
function createListElement(){
var li=document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value="";
}
function addListAfterClick(){
if (inputLength()>0){
createListElement();
}
}
function removeList(){
ul.childNode.removeChild();
}
function addListAfterEnter(event){
if(inputLength()>0 && event.keyCode==13){
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterEnter);
list.addEventListener("dblclick", removeList);
I am trying to create a shopping list, where I want to create a function, when I double click any
I am getting below error prompt in console log:
dom-event.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'removeChild') at HTMLLIElement.removeList
Element.childNode doesn't exist on HTML elements. However you have Element.childNodes (https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) that returns a collection of all elements nested under the given Element.
In your case I suggest you'd use an event listener for each li and remove it when it's clicked (or doubleclicked).
Example :
const l = document.getElementById("dynlist");
const items_data = ["some", "list", "items"];
function onListItemClick(event) {
l.removeChild(event.target)
}
items_data.forEach(lidata => {
const li = document.createElement("li");
li.textContent = lidata;
li.addEventListener("click", onListItemClick);
l.appendChild(li);
})<ul id="dynlist">
</ul>