title: parent hidden but children still visible (I don't want them visible)!
body: <p>Okay, so I had a situation where I needed to add some cloned DOM elements to a parent DIV element in a web page.</p>
  
  <p>I had four of these parent DIV holders. When I make their visibility switch from visible to hidden, a really weird things happens: ALL of the post page-load added children REMAIN visible!</p>
  
  <p>Here is a link to download the source code:
  <a href="http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip" rel="noreferrer">http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip</a></p>
  
  <p>and here is a link to view the phenomenon first-hand:
  <a href="http://www.clarencebowman.com/parent-child-visibility" rel="noreferrer">http://www.clarencebowman.com/parent-child-visibility</a></p>
  
  <p>What you will see is a red box with some magenta child elements added to it, post page-load. There is a show/hide button at the bottom of the page.</p>
  
  <p>I added a green stripe in the parent DIV to show that its child elements do indeed inherit its visibility properly.</p>
  
  <p>But after you add the cloned child elements and then hide the parent DIV, NONE of the cloned child elements disappears!</p>
  
  <p>I have already tried placing the child to be cloned inside the parent DIV before running the duplicating script... it makes no difference.</p>
  
  <p>Any child elements that are added post page-load seem to have somehow lost their inheritance link with the parent DIV element (the red box).....</p>
  
  <p>Anyone else experience this? Is there a simple way to repair/replace/re-assign the children's inheritance?</p>
  
  <p>I am using jQuery 1.5.</p>