Remove element that has triggered event

How would I go about removing the element that has triggered an event?

My template looks like the following:

<template name="mytemplate">
  <button class="mybutton">Button 1</button>
  <button class="mybutton">Button 2</button>
  <button class="mybutton">Button 3</button>
  <button class="mybutton">Button 4</button>
  <button class="mybutton">Button 5</button>
</template>

My wish would be that when users click on Button X, then that same button is removed.

That is, clicking on say Button 3 removes Button 3.

In pseudocode, I’m looking for an event handler like the following:

'click button.mybutton'(event, instance) {
  var user_clicked_this_button = what_function(event, instance);
  user_clicked_this_button.remove();
}

In this, I’m thinking that what_function returns a jQuery selection.

And I’m using the remove() jQuery function… https://api.jquery.com/remove()/

If you’re using jQuery:

'click anyElement' (event, instance) {
  $(event.currentTarget).remove();
},

Thanks!! :slight_smile:

1 Like