削除ボタンで箱ごと消すイデオム?
2006-10-25-6
[Tips]
Webページ上で、JavaScriptにより、「削除ボタン」で箱ごと消す仕掛け。
削除ボタンは、消したい箱(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] : 紙をはがす風。
一個前の中身、中身、中身
×
中身、中身、中身
一個後の中身、中身、中身
<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] : 紙をはがす風。
この記事に言及しているこのブログ内の記事