💻 Вправа "Список справ"

Проект полягає у створенні сторінки з текстовим полем і кнопкою. Інформація, введена у текстове поле має додаватись на сторінку у вигляді елемента списку, після клацання кнопки. Клацання по елементу списку викреслює його.

Нижче наведено зразок виконання проекту:

Сам документ містить лише код для створення заголовка, текстового поля та кнопки. Важливими є ідентифікатори поля та кнопки, оскільки за цими значеннями відбувається відбір об'єктів у функції jQuery

<h1> Список справ </h1>
<input name="textfield" type="text" id="textfield">
<button type="button" id="button">додати справу</button>

Перша функція запускається після повного завантаження html-коду. На це вказує $(document).ready(function()
Вона передусім додає (append) до тіла body початкового документа порожній маркований список ul  з ідентифікатором tasklist. За цим ідентифікатором відбуватиметься подальша обробка списку справ.

$('body').append('<ul id="tasklist"> </ul>'); // додаємо маркований список з ідентифікатором tasklist до body

При клацанні кнопки button запускається функція без назви: $('#button').click(function().
У ній створюється змінна user_text, яка містить вміст (val) відповіді користувача у текстовому полі. Якщо ця змінна не порожня, то відбувається додавання (append) до об'єкту tasklist елемента списку li з вмістом змінної user_text.

  $('#button').click(function() {                     // подія клацання кнопки
    var user_text = $('#textfield').val();        // змінна user_text містить вміст відповіді користувача у текстовому полі
    if (user_text) {                                           // якщо змінна user_text не порожня
      $('#tasklist').append('<li>' + user_text + '</li>');      //додаємо елемент списку з вмістом user_text до елемента tasklist
    }

Наступна функція додає опис події клацання click по об'єктах ідентифікатора tasklist, зокрема по кожному елементу списку li. Для елемента, який клацнули (this), змінюється властивість стилю (css): задається перекреслене (line-through) написання тексту.

//додавання функції до події клацання по об'єктах tasklist, зокрема по кожному елементу списку li
  $('#tasklist').on('click', 'li', function() {
    $(this).css({ //у елемента, який клацнули, змінюється властивість стилю
      'text-decoration': 'line-through'  // оздоблення тексту: перекреслене
    });
  });

Зверніть увагу на використання слова this - воно позначає попередньо виділений селектором $ об'єкт  - у даному випадку елемент списку li, який клацнули.

Завдання

Закреслені елементи потрібно видаляти при повторному клацанні по них. 

Підказка: призначаючи стиль перекреслення, одразу додайте до цього елемента клас, наприклад my 

$(this).addClass("my")

У функції, яка обробляє подію клацання на елементі, слід здійснювати перевірку: якщо елемент списку, на який клацнули, належить до класу my, то його слід видалити, інакше - перекреслити (те, що раніше відбувалось у прикладі).

if ($(this).hasClass('my'))

{$(this).hide(); // видалити елемент; 

}

else 

{

//закреслити елемент ;

// призначити для елемента клас my

}