Как я могу добавить элемент списка, нажав?

Question

Нажав на любую ссылку на моей боковой панели, я хочу добавить новый элемент списка в свою хлебную крошку:

 <ol class="breadcrumb">
      <li>
          <a href="#">Home</a>
      </li>
    </ol> 

  $('.left-sidebar').on( 'click', 'a', function (e) {
      $(".breadcrumb").append('<li class="b_cat"><a href="#">New list item</a></li>');
  });

Но каждый раз, когда я нажимаю, он добавляет новые элементы к нему. Это не то, что мне нужно. Поэтому у меня возникла идея сначала удалить элемент, а затем добавить его. Таким образом, добавлен только один элемент списка:

 $('li').hasClass( "b_cat" ).remove();
 $(".breadcrumb").append('<li class="b_cat"><a href="#">New list item</a></li>');

Но теперь элемент списка не добавлен. На самом деле ничего не происходит.

Answer 1

Вы можете удалить элемент с классом, используя:

$('li.b_cat').remove();

Вам не нужно проверять, есть ли у элемента класс или нет, потому что, если у него нет этого класса, тогда метод .remove() никогда не будет вызываться.

Кроме того, поскольку вы добавляете элемент c stati к breadcrumb, я думаю, что вы должны добавить его только один раз, если он не существует, например:

if(!$(".breadcrumb > li.b_cat").length){
   $(".breadcrumb").append('<li class="b_cat"><a href="#">New list item</a></li>');
}

Но если вы добавляете элементы в том же формате, но изменяется только текст ссылки breadcrumb, вы можете обновить только эту часть, вместо того, чтобы добавлять элемент несколько раз, например:

$('.left-sidebar').on('click', 'a', function(e) {
  if (!$(".breadcrumb > li.b_cat").length) {
    $(".breadcrumb").append('<li class="b_cat"><a href="#"></a></li>');
  }

  // Get clicked link text
  var currentLink = $(this).text();
  $(".breadcrumb > li.b_cat > a").text(currentLink)
});