jQuery — очищаем поле с результатом после каждого выполненного события

Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн кинотеатр сериалов. У них есть премиум и если тыкать на любой из трех пакетов выше, будет бесконечно выводиться ошибка (есть имеются проблемы).

Пример попроще описан ниже. Суть та же. Если тыкать на кнопку будут создаваться заготовленные ранее тексты и добавляться друг за другом.

Исправляется такое недоразумение очень легко, главное не забывать о нем.

jQuery код решения выше

<!-- HTML CODE -->
<div class="container">
   <p class="button">НАЖАТЬ</p>

   <p class="result"></p>
</div>

задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом 
   $('.result').append('Нажато ' + n + ' раз<br>');

});

Как видно на примере выше, при каждом клике будет добавляться новая строка. Это неудобно, например, когда у нас форма обратной связи и идет проверка введенных результатов.

С подобным решением будут выводиться бесконечное количество результатов. Уберем дублирование.

jQuery код удаления дублей

задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом предварительно очистив ее от всего содержимого
   $('.result').empty().append('Нажато ' + n + ' раз<br>');

});

Мы добавили все лишь один метод .empty() и полностью изменили логику работы скрипта