Jquery HTML Traversal in Below code -


<div class="main"> <button class="btnclick" type="button"> </button> <button class="btnclick" type="button"> </button> <div class="child"> <p> ** child text ** </p> <textarea id="edit" class="hidden"></textarea>  //class hidden == display:none </div> </div>  <div class="main"> <button class="btnclick" type="button"> </button> <button class="btnclick" type="button"> </button> <div class="child"> <p> ** child text ** </p> <textarea id="edit" class="hidden"></textarea>  //class hidden == display:none </div> </div> 

am trying implement edit section above code. above <div> generated dynamically , when user click button need hide <p> "** child text ** " , make textarea visible particular div , copy

section textarea

i tried on button click

$(this).closest('#edit').removeclass("hidden"); 

but didn't worked , other code every time first textarea visible irrespective of button click

what looking on first button click particular <div> textarea class hidden removed , copy the<p> text textarea on particula <div>

what best way this. , can add new class , make code generic. ideas !!

you should remove id textarea avoid having multiple id's same.

this function need.

$(document).on('click', '.btnclick', function(){     //cache child div block (everything want in here)     child = $(this).next('.child');      //hide p tag     child.find('p').hide();      //this copies p tag in     child.find('textarea').val( child.find('p').html() );       //this shows textarea     child.find('textarea').show(); }); 

here jsfiddle: http://jsfiddle.net/6wauk/


Comments