jQueryでスマホ向けページのロールオーバー

質問

スマートフォン向けページで、記事をタップすると
その記事にグレーのオーバーレイがかかり、
指が外れるとオーバーレイが消える効果をつけたいと思います。

CSSだけでは難しそうでしたので、jQueryで空のdivを作成する
方法を考えました。

背景を透過した空のdivを生成するところまではできたのですが、
それを外すことがどうしてもできません。
Javascriptの基本的な文法がわかっていないせいだと思います…。

下記がうまく行かなかったソースです。
removeの記述に問題があるのだと思いますが
ご教授の程よろしくお願い致します。

また、この程度JSを使わなくてもCSSだけでできるようでしたら
その方法でもかまいませんので教えていただければと思います。

■JS

<script>
$(function($){
$( "#hoge a" )
.bind( 'touchstart', function(){
$( this ).prepend( "<div></div>" );
}).bind( 'touchend', function(){
$( this ).unbind();
}).bind( 'touchend', function(){
$( "<div></div>" ).remove( );
})
});
</script>

■HTML

<section id="hoge">
<a href="#">
<article>
<figure><img src="image.png" width="100" height="120"></figure>
<p>テキストテキスト</p>
</article>
</a>
</section>

■CSS

#hoge article {
position: relative;
}

#hoge article figure {
z-index: 1;
}

#hoge a div {
background-color: #000;
opacity: 0.3;
width: 100px;
height: 150px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

回答No.1

fujillin

スマホはまったくわかりませんが、

＞$( "<div></div>" ).remove( );
って、『新しくdiv要素を作成して、（追加もせずに）削除する』ってことになるので、結果的に何もしないのと同じでは？

同じ文を記述すれば、同じオブジェクトの意味になると誤解なさっているのではないでしょうか。
var a = $( "<div></div>" );
var b = $( "<div></div>" );
alert(a==b);　// → false

追加した要素を削除するか、親要素の一番最後の要素（=追加した要素）を削除するようにすれば良いのではないでしょうか。
他でスクリプトが動作している可能性（ないでしょうけれど）も含めて考えれば、前者の方が確実な処理になると思います。

お礼

ありがとうございます。
誤解している…というよりも文法を全く理解していないので
「追加した要素を削除する」という記述がどうなるのか
わからないため、憶測で書いてみたのが質問に挙げたソースです。
もうちょっと勉強してみないと解決するのは難しそうですね…。
勉強する時間がとれないため、質問させてもらいました。