Clear page/menus on menu change — php/AJAX - php

Question

I have 3 select menus -- product, topic, and subtopic. Selecting all three will show the FAQ for what's been selected. That part is working fine. My problem is that, once all 3 have been selected and the FAQ shows, if the user goes back and chooses another product, the menus and text below remain there. I would like for them to disappear. I've tried $(.'div').hide() in a couple locations, to no avail. I'm a bit green when it comes to AJAX. Here's my code:
$(document).ready(function() {
$('.box').hide();
$('#product').on('change', function() {
$('.box').hide();
$('#'+$(this).val()).show();
});
$('#topic').on('change', function() {
var sel = $(this).find('option:selected').text();
$.ajax({
url: "support_process.php",
type: "POST",
data: {info : sel},
success: function(data) {
$( ".divtopic" ).html(data);
}
});
});
$('body').on('change', '#subtopic', function(){
var sel = $(this).find('option:selected').text();
$.ajax({
url: "subtopic_process.php",
type: "GET",
data: {info : sel},
success: function(data) {
$( ".divsubtopic" ).html(data);
}
});
});
});
And the html:
<div class="styled-select">
<select id="product">
<option value="option0">Select product...</option>
<?php
while ($row = mysqli_fetch_array($sql))
{
$name = $row['name'];
echo "<option value=\"option$count\">" . $name . "</option>";
$count++;
}
?>
</select>
</div>
<div id="option1" class="box">
<div class="content">
<?php
$sql = mysqli_query($dbConnection, "SELECT t.id, t.topic FROM topic t JOIN product p ON p.id = t.p_id WHERE p.name='Hello'");
?>
<div class="styled-select">
<select name="topic" id="topic">
<option value="optiont0" selected="selected">Select a topic for Hello...</option>
<?php
while ($row = mysqli_fetch_array($sql))
{
echo "<option value=\"optiont$count\" name=\"topic[]\">" . $row['topic'] . "</option>";
$count++;
}
?>
</select>
</div>
<div class="divtopic"></div>
<div class="divsubtopic">
</div>
</div>
</div>
TIA for your help.

Answer 1

I ended up just adding an empty string to the necessary divs.
$('.divtopic').html('');
$('.divsubtopic').html('');
Did the trick. Now, when changing the topmost (product) select, the divs below clear. Maybe not the most efficient (???), but it works!