Jquery HTML Traversal in Below code

Question

<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 !!

stefancarlton · Accepted Answer · 2013-07-15 07:42:56Z

2

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/

answered Jul 15, 2013 at 7:42

stefancarlton

1,72711 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2067567 Over a year ago

Fiddle looks great !! how do i navigate to div if i have 2 buttons on first button click

stefancarlton Over a year ago

I don't follow what you mean?

user2067567 Over a year ago

updated code in my question another button added and i want the event to happen on first button click

stefancarlton Over a year ago

The easiest way would be to assign another class to the first button & run the jQuery against that. Otherwise you could do $('.main').find('.btnClick').first().click( function() { ... } ); You could copy the function I'm here.

Arun P Johny · Accepted Answer · 2013-07-15 07:32:59Z

1

Try

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

answered Jul 15, 2013 at 7:32

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

user2067567 Over a year ago

Thanks! some minor change in my HMTL.Updated Code

Krishna Rani Sahoo · Accepted Answer · 2013-07-15 07:40:49Z

0

Try

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

answered Jul 15, 2013 at 7:40

Krishna Rani Sahoo

1,5391 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Jquery HTML Traversal in Below code

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related