javascript - How to remove elements of a certain class inside a parent element Jquery - Stack Overflow

admin管理员组

文章数量:1278854

I have a span that contains category buttons, and when clicked the subcategory buttons are added within the parent span. The purpose of it is that when the category button is clicked again, if the subcategories have already been populated, it should remove them, like so:

$('.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');
    }
});

So far no luck. Why am I unable to remove all elements of class subcatBtns from the parent element of the category button? The jquery API for the remove() method has this example:

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

Is it because of the parent() method before it? Should I just add a specific Id to the span instead of selecting it through the ID of the child? The HTML is very simple, here:

   <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>

I have a span that contains category buttons, and when clicked the subcategory buttons are added within the parent span. The purpose of it is that when the category button is clicked again, if the subcategories have already been populated, it should remove them, like so:

$('.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');
    }
});

So far no luck. Why am I unable to remove all elements of class subcatBtns from the parent element of the category button? The jquery API for the remove() method has this example:

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

Is it because of the parent() method before it? Should I just add a specific Id to the span instead of selecting it through the ID of the child? The HTML is very simple, here:

   <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>

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 7, 2015 at 21:21 JasonMArcher 15k2222 gold badges5959 silver badges5353 bronze badges asked Feb 7, 2015 at 18:02 Asinus RexAsinus Rex 55499 silver badges2929 bronze badges 6

• 2 Please show the HTML structure. We can provide the best jQuery options when we can clearly see the HTML structure you are dealing with. We have to know where things are relative to each other. – jfriend00 Commented Feb 7, 2015 at 18:05
• There don't appear to be any spans in this code... – MTCoster Commented Feb 7, 2015 at 18:11
• 2 Your HTML does not include anything with the subcatBtns class... – Mr. Polywhirl Commented Feb 7, 2015 at 18:11
• The spans are created with the category buttons inside. The subcategory buttons are created on click. – Asinus Rex Commented Feb 7, 2015 at 18:18
• 1 Why create them when you could just display:none them and use the click event to change that object – Jhecht Commented Feb 7, 2015 at 18:18

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 11

The .remove() method removes the elements on which it is called, optionally filtered by a selector. In the line

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

You define a set of matched elements which contains only one element (the button container) and then call .remove() on this set with the selector ".subcatBtns". Since the container does not match the selector, nothing gets removed.

Try, instead:

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

本文标签： javascriptHow to remove elements of a certain class inside a parent element JqueryStack Overflow