Add/Remove Menu Items

HTML

<div>
    <div id="title">
        Menu Items
        <div id="addItem" class="addOption"> Add </div>
    </div>
    <div id="option">
      <!--<div id="item" class="deleteOption"> item text </div>-->
    </div>
</div>

CSS

#addItem {
  background: #000000;
  color: #ffffff;
  width: 50px;
  height: 10px;
  padding: 5px;
}

#item {
  background: #ffffff;
  color: #000000;
  width: 100px;
  height: 10px;
  padding: 5px;
  float: left;
}

#area {
  position: absolute;
  top: 60px;
  left: 10px;
  background: rgba(220,220,220,0.2);
  color: #666666;
  width: 300px;
  height: 100px;
  padding: 5px;
}

JavaScript

$(document).ready(function () {

    $('.addOption').click(function () {
        $(this).parent().parent().append('<div class="option">' +
            '<div id="item" class="deleteOption"> item text </div>' +
            '<div id="area">Area Text</div>' +
            '</div>');
    });
    
    $('.deleteOption').live('click', function () {
        $(this).parent().remove();
    });

});