Webページ上で、JavaScriptにより、「削除ボタン」で箱ごと消す仕掛け。

<style>
.box {margin:10px; padding:10px; border:solid 1px black;}
.delete {background-color:black; color:white; cursor:pointer;}
</style>

<div class="box">
一個前の中身、中身、中身
</div>
<div class="box">
<span class="delete"
onclick="this.parentNode.parentNode.removeChild(this.parentNode)"
>×</span>
中身、中身、中身
</div>
<div class="box">
一個後の中身、中身、中身
</div>

削除ボタンは、消したい箱(div)の直下に置くというのが条件。

それはそうと onclick 時の
"this.parentNode.parentNode.removeChild(this.parentNode)"
が、なんとなくすっきりしない。Google Code Search で検索してみるとぽろぽろと出てくるので、これってイディオムなのかな。
すぐ上を消すために二つ上に上がるという、まどろっこしい記述が気になるんだよな。 sakujo(this.parantNode) みたいな簡単な記述がいいんだけどなあ。この程度の分量で関数化するのはありえないと思うけど、どこかのjsのライブラリを使えば簡単にできるのかも（未調査）。

ref. Google Code Search
http://www.google.com/codesearch

関連：
- [を] Show/Hide Detail[2005-01-18-5] : 箱を消したり出したり。
- [を] もんたメソッドの簡単サンプル[2005-06-01-3] : 紙をはがす風。