Question

Generated output is as follows:
HTML

<div id="resultCancel" class="error" style="display: block;">
    <a class="close">X</a>
    <ul style="">
        <li for="ProductId" generated="true" class="error" style="">Please Enter License Key</li>
    </ul>
</div>

I need to empty the contents of the li when you click the a.close (before anyone kills me, we’re using an old code base which is why I’m using the .live funciton)

$('a.close').live('click',function(){
   $(this).parent().fadeOut("fast");
   $(this).closest//.next//.sibling('ul').addClass('foo');
});

by using closest I can go up the DOM tree, I need to go down. .next and .sibling are having no effect…. If it matters the div#resultCancel is triggered by jQuery validation plug in.

Answer 1

You can use .next()

$this.next('ul').find('li.error').addClass('foo').html('Text Changed!!')

Use .on() instead of .live() as the latter is deprecated..

$('a.close').on('click',function(){
   var $this = $(this);
   //$this.parent().fadeOut("fast");
   $this.next('ul').find('li.error').addClass('foo').html('Text Changed!!')
});

Also you need not change the text as you are hiding the parent div.

Check Fiddle

For Dynamic elements delegate the event

$('body').on('click','a.close',function(){  // jQuery > 1.7.0

$('body').delegate('a.close' ,'click',function(){  // jQuery < 1.7.0