Jqueryを使用してdivのコンテンツをリセットする

Question

Jqueryを使用してボタンを使ってdivのコンテンツをリセットする方法がわかりません。現在、.buttonが押されると、3つのdivのすべてがランダムな文字になります。しかしこれまでのところ、それをもう一度押すと、最初の手紙が残り、別の手紙が追加されます。私は最初の結果が消えて、新しい手紙を表示する必要があります。ここに私のコードは、要素の終わりに、古いデータに新しいデータを追加します.append(val)方法を、使用しているので、これは..です

$(document).ready(function() { 
    $('.button').click(function() { 
    var itemList = new Array("A", "B", "C", "D", "E"); 
    var randomItem = Math.floor(Math.random() * (itemList.length)); 
    $('.random1').append(itemList[randomItem]); 
    var randomItem = Math.floor(Math.random() * (itemList.length)); 
    $('.random2').append(itemList[randomItem]); 
    var randomItem = Math.floor(Math.random() * (itemList.length)); 
    $('.random3').append(itemList[randomItem]); 
    }); 
$('.reset').on('click', function(){ 
    $(".random1").trigger("reset"); 
    }); 
}); 

Answer 1

です。要素内の古いデータを消去する場合は、.text(val)メソッドを使用します。

$('.random1').append(itemList[randomItem]); 

：

たとえば、あなたがこの行を変更します

$('.random1').text(itemList[randomItem]); 

Answer 2

スペンサーは、あなたが並べ替えられましたが、私はまた、.text()代わりの.append()を使用してに加えて、あなたの主な問題を解決することを言及うあなたはこのように.each()を使ってコードを単純化することもできます：

$(function() { 
 
    $('.button').click(function() { 
 
    var itemList = ["A", "B", "C", "D", "E"]; 
 
    $('.random').each(function(){ 
 
     $(this).text(Math.floor(Math.random() * (itemList.length))); 
 
    }); 
 
    }); 
 
$('.reset').click(function(){ 
 
    $(".random").text(""); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">Get random</button><button class="reset">reset</button><br><br> 
 
<div class="random"></div><br> 
 
<div class="random"></div><br> 
 
<div class="random"></div><br> 
 
<div class="random"></div><br>