modifying ajax returned data before showing

Question

I'm processing subscribtion form with jQuery/ajax and need to display results with success function (they are different depending on if email exists in database). But the trick is I do not need h2 and first "p" tag.

How can I show only div#alertmsg and second "p" tag?

I've tried revoming unnecessary elements with method described here, but it didn't work.

Thanks in advance.

Here is my code:

var dataString = $('#subscribe').serialize();

$.ajax({
    type: "POST",
    url: "/templates/willrock/pommo/user/process.php",
    data: dataString,
    success: function(data){
    var result = $(data);
    $('#success').append(result);
}

Here is the data returned:

<h2>Subscription Review</h2>

<p><a href="url" onClick="history.back(); return false;"><img src="/templates/willrock/pommo/themes/shared/images/icons/back.png" alt="back icon" class="navimage" /> Back to Subscription Form</a></p>

<div id="alertmsg" class="error">

<ul>
<li>Email address already exists. Duplicates are not allowed.</li>
</ul>

</div>

<p><a href="login.php">Update your records</a></p>

Answer 1

You can use the context part of the $() operator, like this:

var dataString = $('#subscribe').serialize();

$.ajax({
    type: "POST",
    url: "/templates/willrock/pommo/user/process.php",
    data: dataString,
    success: function(data){
      var result = $(data);           
      $("h2, p:first", result).remove();
      $('#success').append(result);
    }
});

This looks for <h2> and the first <p> from the response and removes them before appending. The default context (element to look under) is document, so when you're calling $("h2") you're actually calling $("h2", document) (which is actually calling $(document).find("h2"))...you can put something non-default there as well, in this case, the response.