DOM Manipulation

by Anton

HTML

<div id="container">
  <p>List:</p>
  
  <ul id="list" class="list list-class">
  </ul>
  
  <p><button id="btn-add">Add</button><button id="btn-clear">Clear</button></p>
</div>

CSS

.shadowed {
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}

JavaScript

const container = document.getElementById('container');
const btnAdd = document.getElementById('btn-add');
const btnClear = document.getElementById('btn-clear');
let counter = 0;

btnAdd.addEventListener('click', () => {
  const list = container.querySelector('#list');
  debugger;
  const item = document.createElement('li');
  item.innerHTML = `<a href="#" class="remove-item">x</a> Item ${++counter}`;
  list.appendChild(item);
  
  item.querySelector('.remove-item')
  	.addEventListener('click', e => e.target.closest('li').remove());
});

btnClear.addEventListener('click', () => {
	const items = container.querySelectorAll('#list li');
  items.forEach(elem => elem.remove());
});