CODEWITHSUNDEEP
jqueryhtml
user2067567
user2067567

Reputation: 3803

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> ** Some 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> ** Some child Text ** </p>
<textarea id="edit" class="hidden"></textarea>  //class hidden == Display:none
</div>
</div>

Am trying to implement the edit section with the above code. The above <div> is generated dynamically and when user click the button i need to hide the <p> "** Some child Text ** " and make the Textarea visible for that particular Div and copy the

section to Textarea

I tried On Button Click

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

but it didn't worked and with the other code every time only first textarea is visible irrespective of which button i click

What am looking for is on the first button click the particular <div> textarea class hidden to be removed and copy the<p> text to Textarea on that particula <div>

What is the best way to do this. and i can add any new class and make code generic. Your ideas !!

Upvotes: 0

Views: 50

Answers (3)

stefancarlton
stefancarlton

Reputation: 1727

you should remove the id from the textarea to avoid having multiple id's which are the same.

This function does what you need.

$(document).on('click', '.btnClick', function(){
    //cache the child div block (everything you want is in here)
    child = $(this).next('.child');

    //hide the p tag
    child.find('p').hide();

    //this copies the p tag in
    child.find('textarea').val( child.find('p').html() ); 

    //this shows the textarea
    child.find('textarea').show();
});

here is a jsfiddle: http://jsfiddle.net/6wAUK/

Upvotes: 2

Krishna Rani Sahoo
Krishna Rani Sahoo

Reputation: 1539

Try

$(this).parent("div").find('#edit').removeClass("hidden");

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).on('click', '.btnClick', function(){
    var div = $(this).next()
    div.find('p').hide();
    div.find('textarea').show();
})

Upvotes: 1

Related Questions