クローンされたdiv（jQuery）の削除

Question

要素の上にカーソルを置いたときに既に存在するdivを表示したいとします。 要素にはdivに一致するIDがあります。

クローニングと表示部分はホバー上で動作しますが、すでにクローンされた要素を削除しています。私は別の答えで言及したクローゼットを見たが、おそらくそれを間違って使用する。

$('.referer').hover(function() { 
 
    var id = $(this).attr('id') 
 
    $('#reply_' + id).clone().appendTo(this); 
 
}, function() { 
 
    var id = $(this).attr('id') 
 
    $('#reply_' + id).closest(this).remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="reply_1"> 
 
First Post 
 
</div> 
 
<div id="reply_2"> 
 
Second Post 
 
</div> 
 
<div id="reply_3"> 
 
Third Post 
 
</div> 
 
<!--The id is the id of the quoted post--> 
 
<p> 
 
<span class="referer" id="1">Quoted Link (First Post)</span>

Answer 1

あなたは次のように、代わりにこのケースではclosest()機能を必要としますがfind()ません。だから、単にあなたが現在の要素this内'#reply_' + idを検索し、削除し

$(this).find('#reply_' + id).remove(); 

それ。

これが役に立ちます。

$('.referer').hover(function() { 
 
    var id = $(this).attr('id') 
 
    $('#reply_' + id).clone().appendTo(this); 
 
}, function() { 
 
    var id = $(this).attr('id') 
 
    $(this).find('#reply_' + id).remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="reply_1">First Post</div> 
 
<div id="reply_2">Second Post</div> 
 
<div id="reply_3">Third Post</div> 
 
<!--The id is the id of the quoted post--> 
 
<p> 
 
<span class="referer" id="1">Quoted Link (First Post)</span> 
 
<br> 
 
<span class="referer" id="2">Quoted Link (Second Post)</span> 
 
<br> 
 
<span class="referer" id="3">Quoted Link (Third Post)</span>