jQuery remove div

Posted by oshirowanen on Stack Overflow See other posts from Stack Overflow or by oshirowanen
Published on 2010-06-16T08:19:42Z Indexed on 2010/06/16 8:22 UTC
Read the original article Hit count: 426

Filed under:
|

Hello,

I have the following script

jquery here:

<script type="text/javascript">  
    $(function() {  
    $(".column").sortable(  
        { connectWith: '.column' },  
        { handle: '.widget-header' },  
    });  

    $(".widget").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")  
        .find(".widget-header")  
            .addClass("ui-widget-header ui-corner-all")  
            .prepend('<span class="ui-icon ui-icon-minusthick"></span>')  
            .end()  
        .find(".widget-content");  

        $(".widget-header .ui-icon").click(function() {  
            $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");  
            $(this).parents(".widget:first").find(".widget-content").toggle();  
        });  

        $(".column").disableSelection();  
});  
</script>

html here:

<div class="divWidgets">
    <div class="column" id="column_1">
        <div class="widget" id="Widget_1">
            <div class="widget-header" id="Widget_1_Header">widget one</div>
            <div class="widget-content" id="Widget_1_Content">widget one content goes here</div>
        </div>
        <div class="widget" id="Widget_0">
            <div class="widget-header" id="Widget_0_Header">widget zero</div>
            <div class="widget-content" id="Widget_0_Content">widget zero content goes here</div>
        </div>
    </div>
    <div class="column" id="column_2">
        <div class="widget" id="Widget_3">
            <div class="widget-header" id="Widget_3_Header">widget three</div>
            <div class="widget-content" id="Widget_3_Content">widget three content goes here</div>
        </div>
        <div class="widget" id="Widget_5">
            <div class="widget-header" id="Widget_5_Header">widget five</div>
            <div class="widget-content" id="Widget_5_Content">widget five content goes here</div>
        </div>
    </div>
</div>

As you can see, this script places a "minus" button on the widgets, which will minimize the appropriate widget when clicked. How do I replace this "minus" icon with a "delete" which will totally delete the appropriate div when clicked?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui