Как достать форму родителя через JS?

Question

[Keterone]

<form class="task">
     <input type="checkbox" onclick="remove_task()">
     <span>content</span>
</form>

При клике на чекбокс форма должна исчезнуть.

let remove_task = () => {
	console.log(this.parentElement)
}

Но я никак не могу доступиться к форме, используя этот код пишет undefined

Answer 1

[Вадим]

Comments

[Keterone]

Спасибо, можете объяснить как это работает?

[Вадим]

Keterone, ээ, ну, я слишком молод чтобы во всех деталях расписать Вам почему атрибуты обработчиков событий на html элементах работают именно так, но я попробую)
Итак:
в атрибуте onclick мы указали какую функцию нужно выполнить когда пользователь нажмёт на элемент.
Так же мы указали с каким аргументом эту функцию нужно выполнить.
Так как HTML разметка имеет свою объектную структуру и каждый HTML элемент создаётся от определённого класса, то this в атрибуте элемента - это ссылка на элемент, так как элемент - экземпляр класса. В данном случае элемент input экземпляр класса HTMLInputElement.
Ну вот, а в функции указали что она принимает на вход ссылку на html элемент.
Ну и воспользовались DOM Api - вышли на родительский элемент через свойство parentElement.

P.s. под "я слишком молод" я подразумевал, что уже очень давно никто не делает обработчики события через атрибуты элемента. Только через addEventListener

Answer 2

[Евгений]

function remove_task() {
  console.log(this.parentElement)
}

У стрелочной функции нет контекста

Comments

[Keterone]

Всеравно undefined

[Евгений]

Keterone, а если просто console.log(this)

[Евгений]

Keterone, this.parentNode

[Keterone]

Евгений, Тогда мне выведет сам чекбокс на который я нажал, хотя мне нужно удалить целую форму потом

[Евгений]

Keterone, вон ниже подсказывают что при таком еще нужно this в функцию пробрасывать))) просто я пользуюсь addEventListener('click', (e) => console.log(e.target))

[Keterone]

Евгений, Просто в моём случае нужно будет для каждой новой формы addEventListener добавлять, поэтому проще просто для каждой новой формы уже в самом HTML добавить onclick, меньше мороки. Просто я не скинул весь код, суть соего проекта в том, чтобы сделать чтото типа блокнота с заданиями, в который можно их добавлять.

[Евгений]

Keterone, согласен)