javascript - Remove hyperlink behaviour from child elements -

i have anchor tag inside append divs through jquery. want 'hyperlink' effect of parent <a> tag should not appear in appended child elements.

how can achieve jquery or in other way.

here fiddle of want.

update: of answers tell how remove click effect. isn't there can prevent every default behavior of anchor tag child elements?

fiddle

ok. here sample html

<a href="google.com" id="first">     <div>         <p>blah</p>     </div>     <div>         <p>blah</p>     </div>     <div>         <p>blah</p>     </div> </a>  <a href="google.com" id="second">     <div>         <p>blah 2</p>     </div>     <div>         <p>blah 2</p>     </div>     <div>         <p>blah 2</p>     </div> </a> 

this css remove underscore, change font color , cursor

div{     display: inline; }  #second{     text-decoration: none;     color: #000;     cursor: default; } 

the jquery removes click event children

$('#second').children().each(function(){     $(this).click(function(e){         e.preventdefault();     }); }); 

update: further comments, trying complicated , kind of weird. reason have to wrap divs in achor tag not have them inherit properties. have make trade-off. trick remove 'href' tag. not have write jquery/javascript this. matter of fact don't need css then. essentially, remove css , jquery above , remove href second a.

fiddle