Creating a link within another link item in HTML page

Question

I am using Twitter Bootstrap to create a website.

One of the pages in this website, presents a list of items.

In each item box, there is a little x to the right, which the user should be able to click to remove the item from the list. Also, clicking in the general area of a list item links to that items unique page.

Please see the JSFiddle I prepared:

JSFiddle Link

The problem is that I can't seem to put a link on the x. If I try surrounding the x with

<a href="item2/delete">....</a>

the layout falls apart, as you can see here.

Since I'm using Bootstrap, I'm stuck with using their lists which are essentially composed of links (i.e. <a> tags). Despite this, is there any way I can include links like my x inside them?

I've tried using Jquery to create a listener on specifically the x but it still doesn't work (clicking the x takes you to the link of the item).

Please help!

Answer 1

You can add onclick event handler and prevent the default onclick event which is causing the page to be redirected. Try this, I have added an id to your second 'X' button.

$('#linkTo').click(function(event){
    event.preventDefault();
    alert('hello');
});

DEMO

I guess this is what you want.