Удалить родителя без идентификатора или класса, используя JQuery

Question

Итак, у меня есть HTML, который выглядит следующим образом:

<div class='something unknown' id='something_unknown_1'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
<div class='something unknown' id='something_unknown_2'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>

...и так далее. Как именно я буду ссылаться на кнопку, которая запустила onClick, не зная идентификатора кнопки? Я хотел бы, чтобы мой метод removeParent(self) выглядел так:

buttonThatWasClicked.parent().remove();

Answer 1

Я бы добавил класс к кнопкам, чтобы функция не привязывалась к каждой кнопке на странице, а только к тем, которые вы хотели бы.

<div class='something unknown' id='something unknown'>
  <button class="myClass">Remove me and my parent div</div>
</div>
<div class='something unknown' id='something unknown'>
  <button class="myClass" >Remove me and my parent div</div>
</div>

Затем используйте селектор класса jquery, чтобы связать функцию, которая удаляет родителя.

$(".myClass").click(function(){
    $(this).parent().remove();
});

Демо: http://jsfiddle.net/cXLqK/

Answer 2

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

$("button").click(function(){
    removeParent($(this));
});

function removeParent(buttonThatWasClicked){
    buttonThatWasClicked.parent().remove();
}

Answer 3

Если у вас есть onclick на узлах HTML (т.е. не устанавливается через jQuery):

<div class='classA' id='idA'>
  <button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>
<div class='classB' id='idB'>
  <button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>

тогда это будет работать:

removeParent = function(e) {
    $(e).parent().remove();
}

Рабочий пример:

• http://jsfiddle.net/VEETt/