CODEWITHSUNDEEP
jqueryjquery-ui
oshirowanen
oshirowanen

Reputation: 21

jQuery remove div

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?

Upvotes: 2

Views: 19297

Answers (1)

rahul
rahul

Reputation: 187050

To add delete link replace

.prepend('<span class="ui-icon ui-icon-minusthick"></span>')

with

.prepend('<span class="ui-icon ui-icon-minusthick">delete</span>')

Change your click function to something like

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

You have to remove the widget content as well as the delete link.

Upvotes: 1

Related Questions