mootools self reference - mootools

Question

how can i handle a self-reference in mootools?
After i made the next container visible, i would remove the clicked "remove" Button.
With Jquery i can do it throug the "this" operator.
window.addEvent('domready', function(){
$$('div.showButton').addEvent('click', function(){
// show next Container
$$('div.container').getNext().show('inline');
// remove this "showButton"
$(this).remove() // not working
});
});
<!-- container 1 -->
<div class="container">
<div class="showButton">Show next container</div>
<div class="hideButton">hide this container</div>
</div>
<!-- container 2 -->
<div class="container" style="display:none">
<div class="showButton">Show next container</div>
<div class="hideButton">hide this container</div>
</div>

Answer 1

You have to remember mootools is not jquery and they different in the implementation of stuff.
First the $$ function return array of elements and not element so you can't call show on an array - you have to take the element you want (usually it's the first).
Second - you can call the current element using $(this) but it's a bit unnecessary because you are already inside the element event so you just can use "this":
http://jsfiddle.net/kk4gz/2/
$$('div.showButton').addEvent('click', function(){
// show next Container
$$('div.container')[0].getNext().show('inline');
// remove this "showButton"
this.remove();
});