adding delete button to a div : I am going to add a delete button to new items made. this delete button removes the item my-item from the page without affecting others.

I have coded like this but I`m not sure if I`m on the right path.

I`ll be glad if you can help me. :)
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "UTF-8">
    <title>Simple Demo</title>
    <style>
	.my-item{
	width:250px;
	heigth:180px;
	margin:10px;
	padding:20px;
	background:green;
	border:2px solid black;
	}
	.item-header{
	width:150px;
	heigth:120px;
	margin:5px;
	padding:10px;
	background:yellow;
	border:1px solid black;
	}
	.item-body{
	width:70px;
	heigth:50px;
	margin:3px;
	padding:5px;
	background:purple;
	border:1px solid black;
	}
	
	</style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
	$(document).ready(function() {
	
	$("#divButton").click(function(){
	$(".my-item").clone().appendTo("body")
	
	
	});
	$("#toggle").click(function(){
	if ($(".item-body").is(":visible")){
	$(".item-body").slideUp("normal");
	}else{
	$(".item-body").slideDown("normal");
	}
	});
	$("#deleteButton").click(function(){
	$(".my-item").append(".my-item"+ "button        class="deleteButton">Delete</button>");
	});
    });

    
	
	</script>
    </head>
    <body>
	<div class="my-item">
	<div class="item-header">
	<h2 id="toggle">Click Me!</h2>
	<div class="item-body">My Text!
	</div>
	</div>
	</div>
	<button id="divButton">Click!</button>
	<button id="deleteButton">Delete!</button>
	</body>
    </html>   