jquery remove specific div within filtered response

Question

I am making a GET ajax call and it is returning html as data.

I only want to return what is within div#product-detail-response and replace that html with what is within the div.product-detail-info.

That works just fine, but when I am logged into the CMS as an admin, it spits out debugging code at the end of every page. I know I could disable that feature, but I'd like to keep it on and just remove the debugging div from the response.

*the div#debugging-info exists within div#product-detail-response

// this displays the html correctly, but it includes the debugging-info that I want removed
var $response=$(data);
$(".product-detail-info").html($response.filter('#product-detail-response').html());

// I tried adding a remove in different spots of this line without success
$(".product-detail-info").html($response.filter('#product-detail-response').html()).remove("#debugging-info");

*I also put a display: none; for .product-detail-info #debugging-info {} and this:

$("#debugging-info").hide();

after the above code.

Response:

<div class="product-detail-info">
   html and all the stuff I want to show up
   <div id="debugging-info">
      this shows debugging info, and I want to remove this div completely
   </div>
</div>

My desired response:

<div class="product-detail-info">
   html and all the stuff I want to show up
</div>

AJAX call

$.ajax({
    url: '/product_detail_ajax/'+entry_id,
    type: 'GET',
    data : {},
    dataType: 'html',
    context: this,
    success: function (data) {
        var $response=$(data);
        $(".product-detail-info").html($response.filter('#product-detail-response').html());
        $(".breadcrumb-product-title").text($response.filter('#breadcrumb-product-title').text());
    },
    error: function (data) {
        // console.log('error');
    }
});

Answer 1

After you have injected the response htmlin the dom, you could hide the debugging info element, as follows:

$response = $( data );
$( ".product-detail-info" ).html( $response.html() ).find( "#debugging-info" ).hide();

Here is a JS Fiddle

Answer 2

you actually ve something like this:

the data returned from your call

  var data = "<div class='product-detail-info'>html and all the stuff I want to show up<div id='debugging-info'>this shows debugging info, and I want to remove this div completely</div></div>";

and now create a dom obj to manipulate your data

  var parsed = $('<div/>').html(data);

  parsed.find("#debugging-info").remove();

  $("#result").append(parsed.html());

FIDDLE