如何删除父元素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 类的所有元素？ remove() 方法的 jquery API 有这个例子：

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

是不是因为之前的 parent() 方法？我应该只向跨度添加一个特定的 ID，而不是通过孩子的 ID 选择它吗？ 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');

您定义一组匹配的元素，其中仅包含一个元素（按钮容器），然后使用选择器 ".subcatBtns" 在此集合上调用 .remove()。由于容器与选择器不匹配，因此不会删除任何内容。

试试吧：

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