Question

I have this html code

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

I have function to change li text dynamically

$("input#criterion_name").live("keyup",function(e){
    var newText =  $("input#criterion_name").val();
    if(newText){
    $("ul.criteria > li.selected").html(newText);
    }
    else{
    // can't leave the text filed empty 
    $("#criterion_name").addClass("error"); 
} 

the problem is when I type text in the input text, the images in li elements removed.
I want just to change the text in li element

Answer 1

You should wrap the text in its own element, like a span. Then you can target that like this:

$("ul.criteria > li.selected > span.thetext").html(newText);

Also, an id attribute should not be only numbers and should not be used more than once in a document, i.e. it should be unique. You have several instances where id="1"