Manipulating the "data" from $.ajax success: function(data) {

Question

i have this and a simple question to it.

$.ajax({     type: "POST",     url: "/",     data: $(".form").serialize(),     dataType: "html",     success: function (data) {         $("#id").html(data);     } }); 

Inside "data" is some html I am inserting into the DOM. Thats no problem. But I want to manipulate the "data" before doing so. How can I do that? For example there are some li elements in "data". How would I for example delete the last li element out of the "data" string before inserting it into the DOM?

I tried something like

$(data li:last)remove(); 

...but that didnt work.

Thanks for your help.

Answer 1

You don't need a hidden DIV. If you want to convert an html string to a DOM fragment, simply call jQuery on it. In your example:

success: function(data) {     var jqObj = jQuery(data);     jqObj.find("li:last").remove();     $("#id").empty().append(jqObj); } 

Some IE considerations though:

• If your data is large, jQuerifying it in-place is slow in IE (at least with jQuery 1.2.6). In that case you may want to create a container for it like var div = jQuery("<div/>"); div.html(data); then manipulate it there before doing $("#id").html(div.html()).
• If your data has invalid HTML (unclosed tags, etc) you may get weird failures in IE. Just make sure the html is well-formed.

Answer 2

You can create a jQuery object from arbitrary HTML, e.g.:

$('<ul><li>Item</li></ul>'); 

So, you could do something like this:

success: function(data) {   var $list = $(data);    $list.find('li:last').remove();    // Do something with $list here, like append(). } 

Here's a working example you can play around with on JS Bin: http://jsbin.com/ejule3/edit