how to remove the value in the textarea using jquery

Question

hi i have a row in my div table as follows:

<div class="tbody plb" id="impemail">
    <div class="tbc1" style="border-right:none;">
        <input class="tblinput sname pvar" type="text">
        <input type="hidden" class="ppre" value="">
    </div>
    <div class="thc2" style=" width: 75%; border-left:1px dotted #CFCFCF;">
        <textarea class="tblinput semails txtInputta pvar" style="font-size:13px;"></textarea>
        <input type="hidden" class="ppre" value="">
        <div class="errmsg emailerr"></div>
    </div>
    <div class="hideRow" style="width:20px;float:right;padding:15px 0px 0px 0px;">
        <img src="../../../images/redcross.png" alt="" />
    </div>
</div>

and i tried in writing the function to remove this row when i click the class "hideRow" using jQuery function as follows, here i want to clear the input and textarea fields while the hideRow function is going on, so that after refreshing the page the values should not be there in the row. the jQuery function i tried is as follows:

 $(function () {
     // Delete row from PTC grid 
     $('.hideRow').live("click", function () {
         $(this).parents('.plb').hide("slow", function () {
             $(this).parents('.tblinput sname pvar').val('');
             $(this).parents('.tblinput semails txtInputta pvar').val('');
         });
     })
 });

anyone please tell me how to clear these two fields, so that after the page reloads these values should not be there.

Answer 1

Change your selector like following:

$(this).parents('.tblinput.sname.pvar').val('');
$(this).parents('.tblinput.semails.txtInputta.pvar').val('');

For multiple class es of an element, you need join those class names using dot(.) without any space to make a selector among them like above.

---

What's your selectors doing

Your selector .tblinput sname pvar is descendant selector format. That means its searching pvar within sname ans sname within tblinput and same for the second one.

---

Related refs:

• jQuery selectors

---

According to comment

$(function () {
     // Delete row from PTC grid 
     $('.hideRow').live("click", function () {
         $(this).closest('.plb').hide("slow", function () {
           $(this).find('.tblinput.sname.pvar, .tblinput.semails.txtInputta.pvar').val('');
         });
     })
 });

Answer 2

Your main problem is that, within the callback for .hide() , the value of this refers to the element being hidden; correct traversal technique is .find() as in $(this).find('.tblinput.sname.pvar').val(''); .

Javascript

 $(function () {
     // Delete row from PTC grid

     // .live() is deprecated, port to .on()
     $('.hideRow').live("click", function () {

         //use .closest() instead of .parents() - less traversing
         $(this).closest('.plb').hide("slow", function () {

             // search down, not up - and no space between class selectors
             $(this).find('.tblinput.sname.pvar').val('');
             $(this).find('.tblinput.semails.txtInputta.pvar').val('');
         });
     })
 });