Alternative to $ .html (''); to clean a div in Jquery

0

I'm having problems with caching on a page since there are three calls in the event of .change(); 3 input[type='select'] asynchronous with jQuery , but when I redo the first select , for some reason it gets cache of the old value sent to the page by asynchronous.

Anyway, is there any alternative to $("#minhaDiv").html(''); to clear the entire contents of DIV ?

There are 3 selects with 3 divs:

<html>

<select id='select1' name='select1'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<select id='select2' name='select2'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<select id='select3' name='select3'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<div id='divSelect1'></div>
<div id='divSelect2'></div>
<div id='divSelect3'></div>

<script>
$(document).ready(function(){

$("#divSelect1").on('change', function(){

$('#divSelect2').empty();
$('#divSelect3').empty();

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect1').load('select-details/1');
    }
});

}

$("#divSelect2").on('change', function(){

$('#divSelect3').empty();

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect2').load('select-details/1');
    }
});

}

$("#divSelect3").on('change', function(){

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect3').load('select-details/3');
    }
});

}

);
</script>

</html>
    
asked by anonymous 21.09.2018 / 00:06

1 answer

1

Yes. You can use the .empty() method, which removes all child elements from the div selected:

Example:

$("button").click(function(){
    $("#minhaDiv").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="minhaDiv">
   <div>filho 1</div>
   <div>filho 2</div>
</div>
<button>Limpar div</button>

Documentation

    
21.09.2018 / 00:18