jQuery selects old DOM elements even after replaced with an AJAX call

Question

I'm currently using jQuery to load a set of HTML DOM elements which i append as child elements to a div. However even after the ajax call is finished if I select some element that i retrieved from the ajax call it still returns the old replaced value which is a behavior that really confuses me.

var ajax_call = $.ajax({method: "GET", url: url, data: data, dataType: "html"})
  .done(function(data) {

    $('.parent-div').replaceWith( $.parseHTML(data) );

    //DEBUG: Here i try to select a DOM element from the call although it returns the data that should have been replaced.
    console.log( $(".child-div").attr("data-test") );

    console.log("Done");
  })
  .fail(function(error) {
    alert( "Error" );
  })
  .always(function() {
    console.log( "always" );
  });

Basically it should return "new data" from the data-test attribute but it still gets "old-data" which is a unwanted behavior. I have tried many different solution from google and stackoverflow. And I have also tried to use .detach(), .remove() and different ways to make sure the retrieved DOM elements form the AJAX (really) gets replaced.