Question

I have the next HTML:

 <div class="grid_4 col" id="countries">
            <div class="header">COUNTRIES</div>
            <div class="scroll-area">
                <ul id="countrySelector">

                <li><input type="checkbox" value="3" name="0" id="p0"> Algeria</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p1"> Angola</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p2"> Benin</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p3"> Botswana</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p4"> Burkina Faso</li>
                <li><input type="checkbox" value="3" name="0" id="p5"> Burundi</li>
                <li><input type="checkbox" value="3" name="0" id="p6"> Cameroon</li>
                <li><input type="checkbox" value="3" name="0" id="p7"> Cape Verde</li>
                <li><input type="checkbox" value="3" name="0" id="p8"> Central African Republic</li>
                <input type="checkbox" value="2" name="3" id="p142"> Tuvalu</li>
                <li><input type="checkbox" value="2" name="3" id="p143"> Vanuatu</li>
                <li><input type="checkbox" value="2" name="3" id="p144"> Wallis and Futuna</li>
            </div>                
        </div>

I would like to:
– I Expect to get in an array all the inputs id (p143,p144) in an array using the name attribute (3 in this case).

• Then I would like to remove the LI elements that contains that inputs. I know that if I get the input elemens by a CSS Selector I would do it using $”CSSSELECTOR”.parent().remove();

And in a final stage, how to do the change to that CSS Selector to get only the Checked=True using the name again (I want again the IDs).

For the second I´m trying something like:

jQuery("ul#countrySelector > li > checkbox[name=\"" + index + "\"]").parent("li").remove();

Where index is the 0 or 3 in this case, but it doesn´t work.

I don´t need the full solution, and explanation would be better to start thinking in css selectors.

Thanks.

SOLVED.

The HTML was not right because I copy it bad, it is generate by other events.

I only mark as correct the first answer (Wirey) because the others use EACH method and I think that the performance of Wirey solution is the best, and this HTML is just a part of all the generate code in a few levels.

Answer 1

Once you fix your markup with the missing <li> and </ul>..

First issue is your selector

jQuery("ul#countrySelector > li > checkbox[name=\"" + index + "\"]")
// it says starting from ul with id=countrySelector > find children element li > find children element checkbox

It’s not a checkbox element but an input element of type checkbox so what you need is

jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]")
// or just jQuery("ul#countrySelector > li > input[name=\"" + index + "\"]") if these are the only elements with that name

You state that you want an array with those elements ids. So you can use jQuery’s .map() function to return that in a collection then .get() to get an array

var ids = jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]").map(function(){
    return this.id;
}).get(); // <-- use get() to get id's back as an array - now ids contains all the id's in an array

If you wanted to get only checked items, you can use the :checked selector to get only checked inputs

jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]:checked")

Once you get your selector, you can just find your li just like in your example and remove

$(yourselector).parent('li').remove();
// or if it's nested deeper $(yourselector).closest('li').remove();