CODEWITHSUNDEEP
jquery
shanish
shanish

Reputation: 1984

deleting the appended data - jquery

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.

Upvotes: 1

Views: 1434

Answers (4)

Gopal
Gopal

Reputation: 217

For deleting the data, you could do it like this: give some Class or ID of div like if you hide that click on some link like 

<div class='hideme'></div>
<a id='clickme'>clickme</a>

$(document).ready(function(){
  $('#clickme').click(function(){
    $('.hideme').css({'display':'none'});
  })
})

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

var dataObj = $(data)
$('#staffInCharge').append(dataObj);

$("#crossMark").bind('click', function() { dataObj.remove();});

for multiple entries see the fiddle:

http://jsfiddle.net/QMx8y/9/

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 1

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

you can do this like that:- this is just general idea :-

jQuery("#remove").removeAttr("disabled");
jQuery('#mainField').find('tr:last').prev().remove();
jQuery('#mainField').find('tr:last').prev().remove();

deal with class

Upvotes: 1

Related Questions