Skip to content

Instantly share code, notes, and snippets.

@jordanhudgens

jordanhudgens/createAndRemoveElements.html

Created April 10, 2018 03:25
Show Gist options
  • Save jordanhudgens/e2b1ff905d12e5252bbae7f73b8369ff to your computer and use it in GitHub Desktop.
Save jordanhudgens/e2b1ff905d12e5252bbae7f73b8369ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
createAndRemoveElements.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
.todoItem:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="todos">
<h2>Pending Todos</h2>
<ul>
<li class="todoItem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi.</li>
<li class="todoItem">Numquam dolor quo alias nam vel voluptates magni magnam quisquam.</li>
<li class="todoItem">Recusandae eaque quisquam facere ab reprehenderit cupiditate magni placeat quis?</li>
<li class="todoItem">Expedita asperiores nam saepe voluptatem, nostrum aliquid debitis quam recusandae.</li>
<li class="todoItem">Quaerat velit deserunt reprehenderit, vel placeat impedit accusamus non, deleniti!</li>
</ul>
</div>
<h2>Completed Todos</h2>
<ul class="completedTodoWrapper">
<div class="completed"></div>
</ul>
</body>
<script>
const todos = document.querySelectorAll('.todoItem');
const completedTodos = document.querySelector('.completed');
const completedTodoWrapper = document.querySelector('.completedTodoWrapper');
todos.forEach(el => el.addEventListener('click', (evt) => {
let completedTodo = document.createElement('li');
let sampleContent = document.createTextNode(el.textContent);
completedTodo.appendChild(sampleContent);
completedTodoWrapper.insertBefore(completedTodo, completedTodos);
el.remove();
}));
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment