同名クラスの特定番目のみに処理を加えたい

Question

ある親要素の子要素の内、特定番目のみに処理を加えたいと考えております。

<div class="parent">
<div class="child">…</div>
<div>…</div>
<div class="child">…</div>
<div>…</div>
<div>…</div>
<div class="child">…</div>
<div class="child">…</div>
<div>…</div>
<div>…</div>
<div class="child">…</div>
</div>

上記を例にすると、
「.parent」内の3番目の「.child」のみを削除したいです。

こちらの「:nth-child(＊)」を参考にしたのですがうまく行きませんでした。

$(".parent .child:nth-child(3)").remove();

こちらはDOM要素のみにしか利用できないのでしょうか？

今回、「.parent」内の<div>は「.child」が付くもの・付くものが混在で数もランダムに動的に生成されるためDOM要素での指定が難しい状態です。

何卒ご教授よろしくお願いいたします。

Answer 1

nth-child は、要素名につけるもので、クラスselectorにつけるものではないようですね。
たとえば、.parent div:nth-child(3) など。
で、今回はクラスで指定して ３番目のものを扱えばいいのですから、こうなります。

    $('.parent .child:eq(2)').remove();
    //もしくは
    $('.parent .child').eq(2).remove();
    //もしくは
    $($('.parent .child').get(2)).remove();

nth-child は 開始番号が1からでしたが、eq(get)などは0から数えるので 3-1=2 が
3番目の子供、ということになります。

Comments

[castail]

ご回答ありがとうございます！

ご教授頂いた内容で無事実現できました！

誠にありがとうございました！