Hi all,
I am unable to remove html data after append html data to div,
I can remove initially data using this function successfully with out
getting any problem.
Jquery
---------
$(function(){
$("#addrow").live("click",function()
{
var len = parseInt($("#mainlayout .row").length);
alert(len);
var rlen = len+1;
var html ="<div id=\"row"+rlen+"\" class=\"row\"><ul
class=\"ulpanel
\"><li><div class=\"close\" ><img src=\"images/delete.png\" /></
div><div>1</div></li><li><div class=\"close\"><img src=\"images/
delete.png\" /></div><div>2</div></li><li><div class=\"close\"><img
src=\"images/delete.png\" /></div><div>3</div></li></ul></div>";
$("#mainlayout").append(html);
$(".row").not(":last").resizable({handles:"s"});
$("#row"+rlen+" .ulpanel li").draggable();
});
$(".close").live("click",function()
{
var id = $(this).parent().parent().parent().attr("id");
//alert(id);
//alert(parseInt($(".ulpanel li").length));
if($(".ulpanel li").length==1)
$(this).parent().parent().parent().remove();
else
$(this).parent().remove();
});
});
Html data
------------------
<div class="mainlayout" id="mainlayout">
<div class="row ui-resizable" id="row1">
<!--<div class="close"><img src="images/delete.png"
/></div>-->
<ul class="ulpanel">
<li class="ui-draggable">
<div class="close"><img
src="images/delete.png"/></div>
<div>1</div>
</li>
<li class="ui-draggable">
<div class="close"><img
src="images/delete.png"/></div>
<div>2</div>
</li>
<li class="ui-draggable">
<div class="close"><img
src="images/delete.png"/></div>
<div>3</div>
</li>
</ul>
<!--<div id="panel1" class="panel"><div
class="close"><img
src="images/delete.png" /></div>1</div>
<div id="panel1" class="panel"><div class="close"><img
src="images/
delete.png" /></div>2</div>
<div id="panel1" class="panel"><div class="close"><img
src="images/
delete.png" /></div>3</div>-->
<div class="ui-resizable-handle ui-resizable-s" unselectable="on"
style="-moz-user-select: none;"/></div>
<!--<div id="spt2" class="spliter">
<div id="row2" class="row">
<div class="close"><img src="images/delete.png" /></div>
<div id="panel1" class="panel"><div class="close"><img
src="images/
delete.png" /></div>4</div>
<div id="panel1" class="panel"><div class="close"><img
src="images/
delete.png" /></div>5</div>
<div id="panel1" class="panel"><div class="close"><img
src="images/
delete.png" /></div>6</div>
</div>
</div>-->
<div class="row ui-resizable" id="row2"><ul class="ulpanel"><li
class="ui-draggable"><div class="close"><img src="images/delete.png"/
></div><div>1</div></li><li class="ui-draggable"><div
class="close"><img src="images/delete.png"/></div><div>2</div></li><li
class="ui-draggable"><div class="close"><img src="images/delete.png"/
></div><div>3</div></li></ul><div class="ui-resizable-handle ui-
resizable-s" unselectable="on" style="-moz-user-select: none;"/></
div><div class="row" id="row3"><ul class="ulpanel"><li class="ui-
draggable"><div class="close"><img src="images/delete.png"/></
div><div>1</div></li><li class="ui-draggable"><div class="close"><img
src="images/delete.png"/></div><div>2</div></li><li class="ui-
draggable"><div class="close"><img src="images/delete.png"/></
div><div>3</div></li></ul></div></div>
with Regards
sure.
