Clearing all form elements within <div>

Clearing all form elements within <div>

I have a form that is pretty large, so to break it up I hide certain fields unless the information is required.
(example: If you select that you have a dog, more form fields show that ask about the dog. otherwise they are hidden) 

The problem is this. Lets say that I select that I a have a dog, put in some information in the newly shown fields, and then decide I don't want to say that I have a dog.  If I select no to the dog question (the radio button that shows or hides the fields) the information I entered is still there.  I need the information in those fields to be cleared when the fields are hidden.

this is the structure of my current HTML

  1. <div class="dog_hidden">
  2.       <label for="color"> Color of Dog</label>
  3.       <input type="text" name="color"/ >
  4. </div>
  5. <div> class="dog_hidden">
  6.       <label for="breed">Breed of dog</label>
  7.       <input type="text" name="breed"/>
  8. </div>

If the person says the have a dog, then all fields with class .dog_hidden will be shown, otherwise they are hidden.  How can I select all form field types contained within a div of class="dog_hidden" and clear there value (either reset or set to an empty string " ") .

The goal is that every time the fields are hidden they need to be cleared or zeroed.  Its important that this information never get put into the database (all fields with a value will be entered).

Thanks!

Talon