Как удалить элементы определенного класса внутри родительского элемента JQuery

Question

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

$('.catBtns').on('click', function() { 
    var catId = parseInt(this.id); 
    if ($('#' + catId).parent().find('button').length <= 1) { 
     $.each(data.category[catId].subcategory, function(i) { 
      $('<button class="subcatBtns" id="' 
       + data.category[catId].subcategory[i].subcategoryId + '">' 
       + data.category[catId].subcategory[i].subcategoryName.split('<--name-->')[currentLang] 
       + '</button>').appendTo($('#' + catId).parent()); 
      i++; 
     }); 
    } else { 
     $('#' + catId).parent().remove('.subcatBtns'); 
    } 
}); 

до сих пор не повезло. Почему мне не удается удалить все элементы класса subcatBtns из родительского элемента кнопки категории? JQuery API для метода удаления() имеет следующий пример:

$("div").remove(".hello"); 

это из-за метода родительского() перед ним? Должен ли я просто добавить конкретный идентификатор в диапазон, а не выбирать его через идентификатор ребенка? HTML очень прост, здесь:

<nav id="nav"> 
     <img src="img/resources/logo.png" alt="logo" id="logoMenu"> 
     <span id="span0" class="catSpan"> 
      <button class="catBtns" id="0">EN-0</button> 
      <button class="subcatBtns" id="000">EN-000</button> 
      <button class="subcatBtns" id="001">EN-001</button> 
     </span> 
     <span id="span1" class="catSpan"> 
      <button class="catBtns" id="1">EN-1</button> 
     </span> 
     <span id="span2" class="catSpan"> 
      <button class="catBtns" id="2">EN-2</button> 
     </span> 
     <span id="span3" class="catSpan"> 
      <button class="catBtns" id="3">EN-3</button> 
     </span><span id="span4" class="catSpan"> 
      <button class="catBtns" id="4">EN-4</button> 
     </span> 
    </nav> 

Answer 1

Метод .remove() удаляет элементы, на которых она называемые, необязательно отфильтрованных с помощью селектора. В строке

$('#' + catId).parent().remove('.subcatBtns'); 

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

Try, вместо:

$('#' + catId).parent().find('.subcatBtns').remove();