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

Asked

Viewed 748 times

0

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

Anyway, is there any other alternative to $("#minhaDiv").html(''); to clear the entire contents of the 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>
jquery

  • I don’t know what your code looks like, because it didn’t post. But an alternative could be to use the method remove() jQuery.

  • @Leandrade removes(); does not also delete div ?

  • @sam did not solve the problem, it is equal to html('').

  • @Leandrade need to remove only the same internal content, do not delete the DIV, because it is not created, it is only fed content in the event.

  • @Angeloj your question wants an alternative to .html(''), in this case, is the .empty(). Now, whether or not you solved your problem is another story. D... but let’s take a closer look...

  • I raised the question, maybe help me help myself.

  • Yeah, like I said I didn’t see your code 'cause I didn’t post it!

  • The code has several errors. Parentheses are missing to close the events after the }.

  • It is that I typed here, but in the console no error, but I will close the topic, I will redo in another way, I thought and I thought and I decided to do it in a simpler way. Thank you for everything and attention paid, beast success!

Show 4 more comments

1 answer

1

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

Example:

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

Documentation

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.