CODEWITHSUNDEEP
javascriptjqueryajax
CeylonDomains Solutions
CeylonDomains Solutions

Reputation: 53

Completely remove and replace Div content using jQuery

I have an issue, Could you guys please tell me how to completely remove current div content and replace it with latest contents using jQuery? I tried replaceWith, Empty(), Remove(), Html, none of these work.

Here is my code, what I'm trying to do is loading "js scripts" required to run the content within the ajax response. it works as i expected but only for the first set of results. Ex: if i clicked on loademore button for the first time it loads required scripts once. but if i clicked on it again then it starts to load the js scripts again without replacing the current once. so when i do click any button it keeps on running 2 times. 

$("#loadMore").on('click', function(e) {
  e.preventDefault();
  $.ajax({
    method: 'GET',
    url: baseUrl + 'ajaxcontroller/Load_Categories_To_View',
    success: function(data) {
      $('#searchResults').append(data);
      $('#scripts').empty();
      checkloadjscssfile(baseUrl + 'assets/js/comparison/jquery.comparison.js', 'js');
      checkloadjscssfile(baseUrl + 'assets/js/comparison/animatedModal.min.js', 'js');
      checkloadjscssfile(baseUrl + 'assets/js/comparison/comp.js', 'js');
      $('#loadingImage2').hide();
    },
    complete: function() {
      $('#loadingImage2').hide();
      $("#loadMore").show();
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError);
    }
  });
});

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    console.log(fileref);
    $('#scriptsLazy').remove();
    $('#scriptsLazy').replaceWith(fileref);
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
  }
  if (typeof fileref != "undefined") {
    document.getElementsByTagName("head")[0].appendChild(fileref);
  }
}

function checkloadjscssfile(filename, filetype) {
  if (filesadded.indexOf("[" + filename + "]") == -1) {
    loadjscssfile(filename, filetype);
    filesadded += "[" + filename + "]"; //List of files added in the form "[filename1],[filename2],etc"
  } else {
    loadjscssfile(filename, filetype);
    //$('#scripts').refresh();
    //alert('unsuc');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Views: 4510

Answers (3)

XESLOOHC GOD
XESLOOHC GOD

Reputation: 56

"Completely remove and replace Div content using jQuery"

Just remove html and assign again should work fine

Hope Below Snaps helps 

(function(){
  var x = true
  setInterval(function(){
    if(x){
      $('#xesloohc').html('')
    }else{
      $('#xesloohc').html('#GOD #XESLOOHC')
    }
    x=!x
  },3000)
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="god">
  <div id="xesloohc">
    #GOD #XESLOOHC
  </div>
</div>

Upvotes: 1

Abhisek Dutta
Abhisek Dutta

Reputation: 257

HTML:

<div class="program-wrapper">
    Hello there!
</div>

jQuery:

$('.program-wrapper').text('new string');

It will replace your previous text with the new one.

$('.program-wrapper').html('new html');

for eg.: $('.program-wrapper').html('<p> What are you doing? </p>');

It will replace your previous text with the new html.

var ht = $('.program-wrapper').html();
var newHt = ht + '<p>What are you doing?</p>';
$('.program-wrapper').html(newHt);

This will add your new html at the end of your previous html.

var newHt = ht + '<p> What are you doing? </p>';
$('.program-wrapper').append(newHt);

This will also allow you to append your new HTML at the bottom of your div with class name 'program-wrapper'.

Upvotes: 2

Meet
Meet

Reputation: 345

here i have attached the one link that can show the demo of completely remove current div content and replace it with latest contents using jQuery.

Refer link to show the code and demo of it

Upvotes: -2

Related Questions