同一クラス名が複数ある場合のjquery要素に対してのイベント

Question

#質問

<p class="a">aiueo</p>
<p class="a">aiueo</p>
<p class="a">aiueo</p>
<p class="a">aiueo</p>

みたいに同一クラス名が複数存在していた時に、それをjQueryで指定しremoveする関数を書きました。

$(function(){
    $('.a').click(function(){
        $(this).remove();
    });
});

自分の予想では$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択？されていると思っていたので、クリックをすると[a]というクラス名の書かれているp要素全てが消えると思っていました。

しかし、消えたのはクリックされたp要素である一要素のみでした。

私の考えの「$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択？されている」が間違っていると思うのですがどこがおかしいでしょうか？

初めて使用するのでおかしな文章や、ルール違反があったらすみません。
よろしくお願いします。

Answer 1

「$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択？されている」が間違っている

その通りです。
$('.a')は単なる要素選択で、.clickを付けることでその要素に対してのイベントを追加しています。
なので件のコードではすべての$('.a')要素にclickイベントが追加されている状態となります。
その上で$(this).remove();とした場合、thisが示すのは当然自分自身のみなので、消されるのも自分自身です。

やりたい状況がいまいち想像できませんが、とある要素のクリック時に同じ属性（今回で言えばclass=aのもの）をすべて消し去りたいなら、こうでしょうかね。

$(function(){
    $('.a').click(function(){
        $('.a').remove();
    });
});

Comments

[domidomi]

文字が装飾されていてとても読みやすかったです、ありがとうございます。
＞すべての$('.a')要素にclickイベントが追加されている

この考え方がぬけていたようです。

Answer 2

$('.a')は確かにグループですが、その中でthisを指定しているので
セレクタ自身を引き継ぐのではなくそのオブジェクトのみが対象になります。
(each的な処理)

こうすると少しわかりやすいかもしれません。

$('.a').click(function(){
  console.log($(this).length);
  console.log($('.a').length);
});

Comments

[domidomi]

実行してみたところ要素数の差が目で見て分かりました。
ありがとうございます。

Answer 3

$(function(){
    $('.a').click(function(){
        $(this).remove();
    });
});

このスクリプトでは「class='a'」という属性値を持つすべてのElementにイベントを登録しています。

クリックイベントが発生すると、イベントが発生したElement(=$(this))を対象にイベント登録された処理が実行されます。

よって、「クリックされた（イベントが発生した）Elementのみが削除される（登録済み処理が実行される）」という結果になるのです。

Comments

[domidomi]

「イベントを登録」この考え方が抜けていたようです。
とても助かりましたありがとうございます。

Answer 4

既に終わった質問ですが、
イベントのバブリングに着目するとイメージし易いかもしれないですね。

<div class="p">
  <p>
    <strong>test</strong>
  </p>
</div>
<div class="p" />
<div class="p" />
<div class="p" />

この状態でdiv.pにクリックイベントを仕込んでstrongタグ内でクリックすると。
ブラウザによって生み出されたイベントを司る女神様が現れます。
下記のような順番で質問してきます。

1. このstrongをクリックしたのはあなたですね？　あら、でもイベントの関数が登録されてないわね…
2. このpをクリックしたのはあなたですね？　あら、でもイベントの関数が登録されてないわね…
3. このdivをクリックしたのはあなたですね？　正直者は大好きです、ではこの関数を実行しましょう。

「このdivをクリックした」ということは、
対象が$('.p')ではなく、this(エレメント)であることの現れと考えて良いでしょう。