jQuery remove div
- by oshirowanen
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?
