jQuery addClass example

Change class name on click in jQuery

by FrFernandez

HTML

<div class="container">
  <form id="form-todo">
    <input class="input" type="text" placeholder="To Do"> 
    <button type="submit">Submit</button>
  </form>
  <ul id="list-todo">
  </ul>
</div>

CSS

ul#list-todo li.strike span {
  text-decoration: line-through;
}

JavaScript

const formTodo = $('#form-todo');
const listTodo = $('#list-todo');
const listTodoDone = $('#list-todo-done');

function addTodo(event) {
	event.preventDefault();
  
  let input = $('#form-todo > input');
  let value = input.val();
  
  let html = `
  	<li>
      <input type="checkbox" name="${value}" value="${value}" class="done">
  		<span>${value}</span>
      <button class="btn-delete">Delete</button>
    </li>`;
  
  listTodo.append(html);
  
  input.val("");
}

function strikeTodo(event) {
	event.preventDefault();
  
  $(this).parent().toggleClass('strike');
}

function deleteTodo(event) {
	event.preventDefault();
  
  $(this).parent().remove();
}

// Add item.
formTodo.submit(addTodo);
// Delte item.
listTodo.on('click', '.btn-delete', deleteTodo);
// Strike item.
listTodo.on('click', '.done', strikeTodo);