Question

Sorry if this is has already been ask but I can’t find the exact solution that I need.

I am a noob to jquery and am making a newspaper layout form. I can make new divs within the layout canvas without a problem using this code

function makeSplashBlockdiv() {
    $("#canvas").append('<div class="SplashBlock" class="bar">Splash Block 700X250</div>')
    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    })
}​

There are other divs of different size and class names. I am not using id’s because the program can create multiple divs of the same type so id

All of these divs are placed in a div called #canvas.

I need to be able to select a div with the mouse and delete it, the closest I can come it to find which div is with this code but nothing happens.

$("#canvas").click(function(event) {
    $("#log").html("clicked: " + event.target.className);

I know that there should be a click handler, but i have not been able to figure this part out.

Any help will be much appreciated.

Answer 1

Bind the click event to the class of the divs, not to the canvas that holds them.

e.g.

$(".divclass").click(function(){});

That way you can use $(this) to access the clicked div and just remove it

e.g.

$(".divclass").click(function(){
   $(this).remove()
});