• Skip to main content
  • Skip to primary sidebar

Web Development Archive

  • Archive
You are here: Home / JavaScript / Remove only the clicked list item from unordered list – parentNode

Remove only the clicked list item from unordered list – parentNode

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
listUl.addEventListener('click', (event) => {
   if (event.target.tagName == 'BUTTON') {
     let li = event.target.parentNode;
     let ul = li.parentNode;
     ul.removeChild(li);
   }
 });
 toggleList.addEventListener('click', () => {
   if (listDiv.style.display == 'none') {
     toggleList.textContent = 'Hide list';
     listDiv.style.display = 'block';
   } else {
     toggleList.textContent = 'Show list';                        
     listDiv.style.display = 'none';
   }                         
 });
 descriptionButton.addEventListener('click', () => {
   descriptionP.innerHTML = descriptionInput.value + ':';
   descriptionInput.value = '';
 });
 addItemButton.addEventListener('click', () => {
   let ul = document.getElementsByTagName('ul')[0];
   let li = document.createElement('li');
   li.textContent = addItemInput.value;
   ul.appendChild(li);
   addItemInput.value = '';
 });

Filed Under: JavaScript Tagged With: DOM

About Gabor Flamich

I'm a web developer and designer based in Budapest, Hungary. In recent years, I've documented hundreds of solutions I came across during development. This site is an archive for useful code snippets on WordPress, Genesis Framework and WooCommerce. If You have any questions related to WordPress development, get in touch!

Primary Sidebar

  • angular.io
© 2026 WP Flames - All Right Reserved