jQueryのBS modal divで何度もHTMLを追加しないようにするにはどうすればよいですか？

Question

画像をクリックするたびに、モーダルボックスが追加された段落を一度ポップアップ表示するはずです。私には2つの問題があります。まず、私のヘッダーテキストはヘッダー要素に追加されません。次に、ラップトップをクリックするたびに同じ段落をモーダルボックスに追加し続けます。その記述が明確でなかった場合

HTML

<!--Trigger Image --> 
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/02-512.png" id="laptop" class="openmodal"> 

<!--Modal Box --> 
<div class="question" id="question-modal"> 
    <header id="modal-header"> 
    <a href="#" class="close">X</a> 
    </header> 
    <div class="answer"> 
    </div> 
</div> 

JS

var id = this.id; 

//Open the modal box 
$('.openmodal').on('click', function() { 
    $('#question-modal').modal('show'); 
    if (id == 'laptop') 
    $('header').append('<h3>FAQs on laptops</h3>'); 
    $('.answer').append("Mac > any PC"); 
}); 

//close modal box 
$('.close').on('click', function() { 
    $('#question-modal').modal('hide'); 
}); 

は、ここに私のJSFiddleです。

段落を閉じるときに段落を削除する方法がわかりません。私は.remove（）を試みたが、ラップトップをクリックすると、段落は完全に削除された。 .detach（）も動作しません。

Answer 1

私が正しく、目的の動作を理解していた場合、私は追加してみてください、あなたはあなたの近くにモーダルコールバックで.empty()

を探していると信じて：

$('.answer').empty(); 

Answer 2

を変更モーダルボックスはこれにonclickの：

//Open the modal box 
$('.openmodal').on('click', function() { 
    $('#question-modal').modal('show'); 
    if (this.id == 'laptop') 
    $('header'). append('<h3>FAQs on laptops</h3>'); 
    $('.answer').empty(); 
    $('.answer').append("Mac > any PC"); 
    }); 

空白はオープンモーダルである必要があります。そうでない場合、モーダルがクリックで開いても、段落が追加されます。