jQuery button. Remove when clicking icon

Question

Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.

Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed. Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)

So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?

Code:

function Add(value) {
    var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
    $("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
    $("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();

    $('.SearchResultBox').button({
        icons: {
            primary: "ui-icon-circle-close"
        }
    }).delegate("span.ui-icon-circle-close", "click", function () {
        var btnId = $(this).closest("div").remove().attr("aria-controls");
        $("#" + btnId).remove();

    });

    $('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}

function IconCloseClicked(value) {
    $(value).parent().prop("disable", "true");
    //alert($(value).parent().attr("id"));
    alert("icon");
    Remove($(value).parent());
}
function ButtonClicked(o) {
    var test = $(o).prop("disable");
    alert("div");
    if ($(o).attr("disable") == undefined) {
        Opendialog();
    }
}
function Remove(value) {
    $(value).remove();
}

function Opendialog() {
    $("#dialog").dialog("open");
}

Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.

Updated(What I ended up with):

function Add(value) {
    var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
    $("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
    $("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();

    $('.SearchResultBox').button({
        icons: {
            primary: "ui-icon-circle-close"
        }
    }).click(function (e) {
        Opendialog();
    });

    $('.ui-icon-circle-close').click(function (e) {
        $(this).parent().remove();
        e.stopPropagation();
    });
}

function Opendialog() {
    $("#dialog").dialog("open");
}

Answer 1

I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()

$('.icon').click(function(e){
    e.stopPropagation();
});