javascript - 如何删除父元素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，而不是通过 child 的 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();