jQuery find closest ID and remove one of the class names

Question

Hey all I am trying to figure out how to go about finding the next closest ID of a DIV that I then need to replace one of its class names (class="something0 something1 something2").

What I have to work with is this html:

<div class="col-sm-10">
    <select class="tips form-control searchable-select-holder-req" data-tooltip="example 1" data-val="" id="environment" name="environment" style="width: 260px; display: none;">
        <option value="1">IT</option>
        <option value="2">FRASTRUCTURE</option>
        <option value="3">blah 2</option>
        <option value="4">blah 3</option>
        <option value="5">blah 4</option>
        <option value="6">blah 5</option>
        <option value="7">blah 6</option>
        <option value="8">SPARE</option>
        <option value="9">LAB</option>
        <option value="10">STUDY</option>
    </select>
    <div tabindex="0" class="searchable-select" style="width: 260px; min-width: 260px;">
        <div class="tips searchable-select-holder searchable-select-holder-req" data-tooltip="example 1" data-tag="environment"></div>
        <div class="searchable-select-dropdown">
            <span>Search:</span> 
            <input type="text" class="searchable-select-input" style="width: 250px; max-width: 185px; background-color: rgb(254, 231, 231);" />
            <div class="searchable-scroll has-next">
                <div class="searchable-has-privious searchable-select-hide">...</div>
                <div class="searchable-select-items mCustomScrollbar _mCS_2" style="font-family: Courier New, Courier, monospace;">
                    <div id="mCSB_2" class="mCustomScrollBox mCS-bodyScroll mCSB_vertical mCSB_inside" style="max-height: 185px;" tabindex="0">
                        <div id="mCSB_2_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
                          <div class="searchable-select-item" data-value=""></div>
                          <div class="searchable-select-item" data-value="1">IT</div>
                          <div class="searchable-select-item" data-value="2">FRASTRUCTURE</div>
                          <div class="searchable-select-item" data-value="3">blah 2</div>
                          <div class="searchable-select-item selected" data-value="4">blah 3</div>
                          <div class="searchable-select-item" data-value="5">blah 4</div>
                          <div class="searchable-select-item" data-value="6">blah 5</div>
                          <div class="searchable-select-item" data-value="7">blah 6</div>
                          <div class="searchable-select-item" data-value="8">SPARE</div>
                          <div class="searchable-select-item" data-value="9">LAB</div>
                          <div class="searchable-select-item" data-value="10">STUDY</div>
                        </div>
                        <div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-bodyScroll mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: block;">
                            <div class="mCSB_draggerContainer">
                                <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px; display: block; height: 104px; max-height: 175px;" oncontextmenu="return false;">
                                    <div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
                                </div>
                                <div class="mCSB_draggerRail"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="searchable-has-next">...</div>
            </div>
        </div>
    </div>
</div>

I am currently at the data-tag="enviroment" part of the code to change the inner text which I can do without issue. Now from there I need to find the next/closest div with ID of mCSB_2_container and then find the DIV within that has a class of selected and remove it and place it on the first div item (which here would be a blank value).

This is my current JS that I am using to get to the **** part:

$("select").each(function() {
   $('[data-tag="' + this.id + '"]').text(''); //Clears Text
   //$(this).next('#mCSB_2_container').removeClass("selected");
});

As you can see from the code, I've tried using $(this).next('#mCSB_2_container').removeClass("selected"); but that doesnt seem to work since its looking for the class name selected within the mCSB_2_container .

Any help would be great to figure this out!

Answer 1

You can use find() to find the selected class like: $(this).next('.searchable-select').find('.selected').removeClass("selected"); . Please see the working snippet below:

 $("select").each(function() { $('[data-tag="' + this.id + '"]').text(''); //Clears Text $(this).next('.searchable-select').find('.selected').removeClass("selected"); $(this).next('.searchable-select').find('.searchable-select-item:first-child').addClass('selected'); }); 

 .selected { background: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-10"> <select class="tips form-control searchable-select-holder-req" data-tooltip="example 1" data-val="" id="environment" name="environment" style="width: 260px;"> <option value="1">IT</option> <option value="2">INFRASTRUCTURE</option> <option value="3">blah</option> <option value="4">blah</option> <option value="5">blah</option> <option value="6">blah</option> <option value="7">blah</option> <option value="8">SPARE</option> <option value="9">LAB</option> <option value="10">STUDY</option> </select> <div tabindex="0" class="searchable-select" style="width: 260px; min-width: 260px;"> <div class="tips searchable-select-holder searchable-select-holder-req" data-tooltip="example 1" data-tag="environment"></div> <div class="searchable-select-dropdown"> <span>Search:</span> <input type="text" class="searchable-select-input" style="width: 250px; max-width: 185px; background-color: rgb(254, 231, 231);" /> <div class="searchable-scroll has-next"> <div class="searchable-has-privious searchable-select-hide">...</div> <div class="searchable-select-items mCustomScrollbar _mCS_2" style="font-family: Courier New, Courier, monospace;"> <div id="mCSB_2" class="mCustomScrollBox mCS-bodyScroll mCSB_vertical mCSB_inside" style="max-height: 185px;" tabindex="0"> <div id="mCSB_2_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr"> <div class="searchable-select-item" data-value="">first item</div> <div class="searchable-select-item" data-value="1">IT</div> <div class="searchable-select-item" data-value="2">FRASTRUCTURE</div> <div class="searchable-select-item" data-value="3">blah 2</div> <div class="searchable-select-item selected" data-value="4">blah 3</div> <div class="searchable-select-item" data-value="5">blah 4</div> <div class="searchable-select-item" data-value="6">blah 5</div> <div class="searchable-select-item" data-value="7">blah 6</div> <div class="searchable-select-item" data-value="8">SPARE</div> <div class="searchable-select-item" data-value="9">LAB</div> <div class="searchable-select-item" data-value="10">STUDY</div> </div> <div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-bodyScroll mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: block;"> <div class="mCSB_draggerContainer"> <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px; display: block; height: 104px; max-height: 175px;" oncontextmenu="return false;"> <div class="mCSB_dragger_bar" style="line-height: 30px;"></div> </div> <div class="mCSB_draggerRail"></div> </div> </div> </div> </div> <div class="searchable-has-next">...</div> </div> </div> </div> </div> 

Answer 2

I think maybe you can do this.

 $('.container').click(function(e) { e.preventDefault(); var x = $(this).next().attr('id'); $('.container').remove(x); }); 

 <a class="container" id="1" href="#">One</a> <a class="container" id="2" href="#">Two</a> <a class="container" id="3" href="#">Three</a>