Develop Reference

Remove hyperlink behaviour from child elements

I have an anchor tag inside which I append some divs through jQuery. I want that the 'hyperlink' effect of the parent <a> tag should not appear in the appended child elements.
How can we achieve this with jQuery or in some other way.
Here is the fiddle of what I want.
UPDATE:
Most of the answers tell how to remove the click effect. Isn't there something that can prevent every default behavior of anchor tag from child elements?

FIDDLE
Ok. Here is some 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 will remove the underscore, change the font color and the cursor
div{
display: inline;
}
#second{
text-decoration: none;
color: #000;
cursor: default;
}
The jquery removes the click event from the children
$('#second').children().each(function(){
$(this).click(function(e){
e.preventDefault();
});
});
Update: Further to your comments, what you are trying to do is complicated and kind of weird. You say for some reason you have to wrap the divs in an achor tag but not have them inherit the properties. You will have to make some trade-off. The trick is to remove the 'href' from the a tag. You would not have to write any jQuery/javascript for this. As a matter of fact you don't even need any CSS then. Essentially, remove all the css and jquery from the above and remove the href from the second a.
FIDDLE

You can use the :first-child Selector. Look at http://api.jquery.com/first-child-selector/

You can remove underline with CSS:
a div {
text-decoration: none
}
To stop anchor from following its href attribute you need to bind a handler to click event which returns false. In jQuery you can achieve it this way:
$('a div').on('click', function() {
// do whatever you want to do here
return false;
});
I edited selectors (added div) after you provided jsfiddle. Still, there is one more thing. According to your fiddle I assume you didn't want "Something" to be wrapped with div.
It should look like this: jsfiddle

You should add an eventlistener to your anchors and prevent the default behaviour:
document.getElementsByTagName("a")[0].addEventListener("click", function(e){
if(e.target.tagName=="DIV") e.preventDefault();
});

jQuery remove div onclick

I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.

If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.

HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/

Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});

Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample

Loop through multiple elements from an Iframe

I have content loaded into a hidden iframe on a page and I'm wanting to loop through multiple elements on a page and get text using jquery.
Here is my current code:
$('#myiFrame').contents().find('div.air').each(function (index) {
alert($(this).text());
});
It only seems to find the one div with the class of 'air', although there is two divs on the page. How is my code wrong ?
Edit: I should say their are two 'div.air' on the page not under the same parent.
HTML it something like :
<section id="blah">
<div class="air"> text here </div>
</section>
<section id="blah2">
<div class="air"> text here </div>
</section>

Worked out my own answer:
$('#iframe').contents().find('.air').each(function(){
var foo = $(this).html();
//do your Stuff here
});

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});​
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});

Detecting clicks inside a div using wildcards in jQuery

I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class

I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.

Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});