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');

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

请尝试：

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

如何在父元素Jquery中删除某个类的元素

1 个答案: