liタグを1つだけ取得し、HTMLの中から削除したい

Question

いつもお世話になっております。

liタグを1つだけ取得し、HTMLの中から削除したいです。
取得したliタグは、別の場所（例えば違うulタグの中）で使用したいのですが、
どのようにすれば良いのでしょうか。

---

■HTML（jQueryで生成しているため、改行なしで繋がっている状態）

<ul id="hoge">**<li><img src="img/1.png" alt="1"></li><li>**<img src="img/2.png" alt="2"></li><li><img src="img/3.png" alt="3"></li></ul>

↓

■下記のみを取得して、HTMLの中から削除したい
<li><img src="img/1.png" alt="1"></li><li>
※取得したliタグは別の場所で使用する

■取得の条件
id="hoge"のulタグの中にある、1番目のliタグ（<li>～</li>）を1つだけ取得
※必ず1番目にalt="1"がくるとは限らない。

---

恐れ入りますが、
ご教示の程よろしくお願いいたします。

Comments

[yambejp]

とりだす条件を明記してください

[scoa]

【条件】<li>～</li>を1つだけ取り出す　でよろしいでしょうか…。

[yambejp]

HTML上にある全てのLIの中の最初の1つという意味でしょうか？

[scoa]

言葉足らずで申し訳ございません。質問内容に「取得の条件」を追記いたしました。

[退会済みユーザー]

src="img/1.png"　となっているものを削除したいのか、alt="1" となっているものを削除したいのかが読み取れません。

Answer 1

再利用するなら.detach()の方がいいのかもしれません。

var li = $('li:has(img[alt="1"])')
li.on('click', function(){alert('click')}) //removeメソッドだとこのクリックイベントは消えます。
li.detach();
$('#fuga').append(li);

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

.detach() | jQuery API Documentation

また、即座に再利用するなら.append()で移動した方が楽ですね。
https://jsfiddle.net/9z3m6j2d/

Comments

[scoa]

ご回答ありがとうございます。
またしても説明不足で大変申し訳ございませんが、
必ず1番目に「alt="1"」がくるとは限りません…。
ですので、「1番目の<li>～</li>を取得」という形にしたいです。

Answer 2

とりあえず先頭のliを削除する

$(function(){
  $('#hoge li').eq(0).remove();
});

Comments

[yambejp]

id=hoge内の先頭のliを削除するように修正しておきました

Answer 3

$(function(){
  $('#hoge li:first').remove();
});

「◯◯の子要素」の様々な書き方はこの動画が勉強になります。
http://dotinstall.com/lessons/basic_jquery_v2/25204