如何防止在jQuery中的BS模塊div中多次添加html？

Question

每當我點擊一個圖像，一個模式框應該彈出一個附加的段落。我有兩個問題。首先，我的標題文本不會附加到標題元素。其次，每次單擊筆記本電腦時，都會將同一段落附加到模式框中。

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"); 
    }); 

而空應該是打開模態。否則，如果模式仍然打開點擊將添加段落