Question

select: function (event, ui) {

        var staffItem = new Object();


        staffItem.StaffId = ui.item.id;
        staffItem.Name = ui.item.name;
        staffItem.Photo = ui.item.image;
        staffItem.Email=ui.item.email;
        staffItem.Mobile=ui.item.mobile;          

              var data = "<div><table width='100%'><tr><td align='right' ><div class='close16'/></td></tr></table><div><table><tr><td rowspan='4' width='50px;'><img src='" + staffItem.Photo + "' Width='48' Height='48'  /></td><td>" + staffItem.Name + " ( " + staffItem.StaffId + " )</td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + staffItem.Email + "</td><td>&nbsp;|&nbsp;</td><td>" + staffItem.Mobile + "</td></tr></table></td></tr></table></td></tr></table></div></div> ";
                $('#staffInCharge').css('background-color','#FFAA55');
                $('#staffInCharge').append(data);

am using this code to append staff details into a div, and in the close16 class am using a image file(for cross mark to delete the data), if I click the cross mark the appended data should be deleted, how can I do that, and also when I append the new data its appending one by one(below of existing data) i need to append it to the right side, how can I do this.

Answer 1

For deleting the data, you could do something like this:

$(document).on('click', '.close16', function() {
    $(this).parentsUntil('div').remove();
});

As for appending data, it depends a bit on what your DOM looks like, and exactly what you want to achieve. You might want to have a look at insertAfter and insertBefore for controlling exactly where your data is added. Making things appear “to the right side” may be more a question of the styles of the elements you’re inserting, than where in the DOM you’re inserting them.

.append adds content to the bottom of a container as far as your markup is considered. Whether or not this is the same thing as items physically appear below previous items in the container depends on the properties of these elements.

If you’re adding a DIV after another DIV, then it will, by default, appear below the former, but this has more to do with the element’s display-mode than with its position in your code. Example.

If the DIV elements were of a different display mode, for instance inline-block, they would appear to the right of the previous element. Example. Note that the JavaScript doesn’t change.

However, if you instead wanted to position your DIVs with float: left;, you might find that you wanted to insert the elements not at the bottom of the container, but before a clear: both-element, that would always be at the bottom. You would then have to use something like insertBefore. Example.

Which exact approach works best for you depends on very many aspects of your markup and styles. Saying that you want something “to the right side” does not provide us with enough information to assist you in this regard.