javascript - divを完全に削除して再度追加

Question

同じdivをクリックしてdiv(#pop1)を削除し、他のdiv(#pop2)をクリックしてそのdivを再度追加し、そのdiv(#pop2)を削除する必要があります。

私のデモをチェック

divを削除するコードを書きましたが、再度追加する方法。

$(".del").click(function(){
   $(this).parent().remove();     
})

Answer 1

[デモ]はこちらです。クラスが小さすぎる.playerため、クラスにバインドしました。delそれに応じて変更できます！

$(".player").bind('click', function(){
    $('.player').show();
   $(this).hide();     
})

Answer 2

コメントの提案の 1 つのように、非表示および表示する場合は.hide()andを使用します。.show()div

ただし、後でアタッチしたい場合removeはdiv、グローバル変数を使用して保存しますdiv

var $div=$(".del"); \\ the global variable

次に、コードを使用して削除する前に.remove()add $div=$(".del").

divその後、それを使用して親要素にアタッチできます$("#parentDiv").append($div)

PS: 現在、私のネットワークであなたのフィドルにアクセスできないため、更新されたフィドルを投稿できません

Answer 3

これはあなたが求めているものかもしれません：

<script type="text/javascript">
$(function(){
var cached = null;

$(".del").click(function(){
    if(cached != null){
     $('body').prepend(cached);   
    }
   cached = $(this).parent().detach();
})
});
</script>

注:インラインで記述したクリック ハンドラーを削除します。

<a class="del" href='#' onclick="remove('rem')" ><div id="pop3"></div></a>