Обновить добавленный элемент без перезагрузки всей страницы

Question

Я получаю животных из json-файла случайным образом и разбивая буквы в промежутке и добавляя его в .wrapper div.

Но когда я перезаряжаю json, новое животное добавляет туда, а старый не исчезает.

Как я могу разделить букву с помощью метода html() methtod или как я могу перезагрузить определенный div без обновления всей страницы?

Нажмите кнопку обновления, чтобы увидеть новое имя животного, которое добавляет div (как мы и ожидаем). Я просто ищу решение с использованием метода append() или нет.

JSFIDDLE

function loadJson() { 

    $.getJSON('https://raw.githubusercontent.com/boennemann/animals/master/words.json', function(data) { 

    var s = data[Math.floor((Math.random() * data.length))]; 

    for (i = 0; i < s.length; i++) { 

     var $span = $("<span>", { 
     class: " letter" + i 
     }).appendTo(".wrapper");; 
     $span.append(s[i]); 
    } 
    }); 

} 

loadJson(); 

$("button").click(function() { 
    loadJson(); 
}); 

Answer 1

использование $ ('имя_класса '). Пустой() перед Append .. https://jsfiddle.net/9wsjf90r/1/

function loadJson() { 

    $.getJSON('https://raw.githubusercontent.com/boennemann/animals/master/words.json', function(data) { 

    var s = data[Math.floor((Math.random() * data.length))]; 
$('.wrapper').empty(); 
    for (i = 0; i < s.length; i++) { 

     var $span = $("<span>", { 
     class: " letter" + i 
     }).appendTo(".wrapper");; 

     $span.append(s[i]); 
    } 
    }); 

} 

loadJson(); 

$("button").click(function() { 
    loadJson(); 
});