DOM

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 = '';
 });

Select last-child and remove it from the list with JavaScript

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 addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');
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 = '';
 });
 removeItemButton.addEventListener('click', () => {
   let ul = document.getElementsByTagName('ul')[0];
   let li = document.querySelector('li:last-child');
   ul.removeChild(li);
 });

Create a new element and set a new class to it – .className

const contentDiv = document.getElementById("content");
let newParagraph = document.createElement('p');
newParagraph.className = 'panel';

Create a new list item and append it to the DOM – createElement / appendChild

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 addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
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 = '';
 });

Show / Hide Elements with JavaScript and rewrite with textContent

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input.description');
const p = document.querySelector('p.description');
const button = document.querySelector('button.description');
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';
   }                         
 });
 button.addEventListener('click', () => {
   p.innerHTML = input.value + ':';
 });

Using CSS Queries to Select Page Elements – querySelectorAll – JavaScript

const myList = document.getElementsByTagName('li');
 for (let i = 0; i < myList.length; i += 1) {
   myList[i].style.color = 'purple';
 }
 const errorNotPurple = document.querySelectorAll('.error-not-purple');
 for (let i = 0; i < errorNotPurple.length; i += 1) {
   errorNotPurple[i].style.color = 'red';
 }
 const evens = document.querySelectorAll('li:nth-child(odd)');
 for (let i = 0; i < evens.length; i += 1) {
   evens[i].style.backgroundColor = 'lightgray';
 }

Select Class with JavaScript – getElementsByClassName

const myList = document.getElementsByTagName('li');
 for (let i = 0; i < myList.length; i += 1) {
   myList[i].style.color = 'purple';
 }
 const errorNotPurple = document.getElementsByClassName('error-not-purple');
 for (let i = 0; i < errorNotPurple.length; i += 1) {
   errorNotPurple[i].style.color = 'red';
 }

Select Multiple Elements in JavaScript – getElementsByTagName

const myList = document.getElementsByTagName('li');
 for ( let i = 0; i < myList.length; i++ ){
     myList[i].style.backgroundColor = 'purple';
     myList[i].style.color = 'white';
 }

Select ID with JavaScript – getElementById

Change the color of #myHeading element to purple

document.getElementById('myHeading').style.color = 'purple'

Change the background of #myHeading element to tomato

document.getElementById('myHeading').style.backgroundColor = 'tomato'

AddEventListener ‘click’ in JavaScript

const myHeading = document.getElementById('myHeading');
 const myButton = document.getElementById('myButton');
 myButton.addEventListener('click', () => {
     myHeading.style.backgroundColor = 'purple';
     myHeading.style.color = 'white';
 });

Add color with input field

const myHeading = document.getElementById('myHeading');
 const myButton = document.getElementById('myButton');
 const myTextInput = document.getElementById('myTextInput');
 myButton.addEventListener('click', () => {
   myHeading.style.color = myTextInput.value;
 });