title: change just text in li that contains img
body: <p>I have this html code </p>
  
  <pre><code>&lt;ul class="criteria"&gt;
  &lt;li id="1"&gt;
  criteria 1
  &lt;img id="1" class="save_criterion" src="../images/icons/add-icon-2.png"&gt;
  &lt;img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png"&gt;
  &lt;/li&gt;
  &lt;li id="2"&gt;
  criteria 2
  &lt;img id="2" class="save_criterion" src="../images/icons/add-icon-2.png"&gt;
  &lt;img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png"&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have function to change li text dynamically </p>
  
  <pre><code>$("input#criterion_name").live("keyup",function(e){
      var newText =  $("input#criterion_name").val();
      if(newText){
      $("ul.criteria &gt; li.selected").html(newText);
      }
      else{
      // can't leave the text filed empty 
      $("#criterion_name").addClass("error"); 
  } 
  </code></pre>
  
  <p>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</p>