Question

I have this html code generating by JavaScript function, in this simple case I have just one level of ul and 2 li elements

<ul id="criteria">
    <li>Goal
    <img id="add_criterion" class="add_criterion" src="../images/icons/add-icon.png">
        <ul id="1" class="criteria">
            <li id="1">criteria 1</li>
            <li id="2">criteria 2</li>
        </ul>
    </li>
 </ul>

and my JavaScript function to remove li that corresponds to id and level(id of ul)

if($("ul[id="+level+"][class=criteria] li").length ==1){
    $("ul[id="+level+"][class=criteria]").remove();
}else{
    $("ul[id="+level+"][class=criteria] li#"+i).remove();
}

my problem is when I start by first li I can’t remove it, but when I start by the second one I remove it and remove the first with no problems

Answer 1

As a quick-fix without fixing the unique id issue, you should be able to simply replace the else remove with $("ul[id="+level+"][class=criteria] li[id="+i+"]").remove();

Obviously though, the better solution in the long run would be to not use duplicate id’s.