элемент слайда, по которому был нажат

Question

У меня есть этот простой код html:

<ul>
   <li>
      <button onclick="test()">Button</button>
   </li>
   <li>
      <button onclick="test()">Button</button>
   </li>
   <li>
      <button onclick="test()">Button</button>
   </li>
</ul>

и моя javascript функция:

function test() {
    // do something
}

Теперь, если я нажму на кнопку, я бы хотел удалить весь элемент

кнопки, по которой была нажата кнопка. Вы можете показать мне, как? : /

Под словом «удалить» я подразумеваю

$(selector).toggle( "slide" );

Answer 1

Обычно не очень хорошая идея использовать встроенные обработчики событий.

Вместо этого вы можете легко прикрепить обработчик событий ко всем кнопкам в jQuery, например:

$('ul button').click(function(){
  $(this).closest('li').toggle( "slide" );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li><button>Button 1</button></li>
   <li><button>Button 2</button></li>
   <li><button>Button 3</button></li>
</ul>

---

В случае, если вы все еще хотите использовать встроенные обработчики событий, вы можете просто передать this внутри обработчика, например:

<button onclick="test(this)">Button</button>

и обновите свою javascript функцию, например:

function test(obj) {
    $(obj).closest('li').toggle("slide");
}

Демо:

function test(obj) {
  $(obj).closest('li').toggle("slide");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><button onclick="test(this)">Button 1</button></li>
  <li><button onclick="test(this)">Button 2</button></li>
  <li><button onclick="test(this)">Button 3</button></li>
</ul>

Answer 2

Во-первых, избегайте встроенных обработчиков - они неэлегантны, утомительны в работе и имеют слишком много проблем, чтобы их стоило использовать в настоящее время. Правильно прикрепите прослушиватели событий, используя вместо них Javascript с addEventListener или jQuery.

Переберите все кнопки и добавьте прослушиватель для каждой. При нажатии перейдите к родительскому элементу кнопки и вызовите для него .toggle('slide'):

$('button').on('click', function() {
  $(this).parent().toggle( "slide" );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li>
      <button>Button</button>
   </li>
   <li>
      <button>Button</button>
   </li>
   <li>
      <button>Button</button>
   </li>
</ul>