清除 javascript 中的 div

Question

i'm new to javascript development and stuck with a problem: depending on the selected option in a form, I want first to clear the inner of a div and fill it then with another content by using ajax. This is my current code:

$(document).on('change','#uebungsart', function() {
    var div = document.getElementById('zusatz-uebung');
    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }
});
 
$( document ).ready(function() {
    if(document.getElementById('uebungsart').value == "bet") {  
    $.ajax({  
            type: 'POST',  
            url: 'helper/javascript-loadings/addOMT.php', 
            success: function(response) {
                $("#zusatz-uebung").html(response);   
            }
        });
    }

    if(document.getElementById('uebungsart').value == "omt") {
    $.ajax({  
            type: 'POST',  
            url: 'helper/javascript-loadings/addBET.php', 
            success: function(response) {
                $("#zusatz-uebung").html(response);
                }
            });
    }      
});

Unfortunately that doesn't work... may somebody help me? :-)

best regards Florian

Answer 1

Thank you guys for your hints, I edited my code to the following:

$(document).on('change','#uebungsart', function() {
           document.getElementById('zusatz-uebung').innerHTML = "";
            if(document.getElementById('uebungsart').value == "bet") {
                $.ajax({  
                    type: 'POST',  
                    url: 'helper/javascript-loadings/addOMT.php', 
                    success: function(response) {            
                        $("#zusatz-uebung").html(response);
                        }
                });
            }

            if(document.getElementById('uebungsart').value == "omt") {
                $.ajax({  
                    type: 'POST',  
                    url: 'helper/javascript-loadings/addBET.php', 
                    success: function(response) {
                        $("#zusatz-uebung").html(response);
                        }
                    });
                }
        });

Now it clears the content of the response-div correctly and loads the response of both php-Scripts depending on the selected option

Answer 2

Try this:

<form action="">
 <label for="fname">DATA:</label>
 <input type="text" id="fname" name="fname" onkeyup="datawithquery(this.value)">
</form>
<p>User: <span id="show"></span></p>

function datawithquery(id) {
  if (id.length == 0) {
  document.getElementById("fname").placeholder = "none data";
return;
}
else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("show").innerHTML = this.responseText;
  }
}
xmlhttp.open("POST", "helper/javascript-loadings/addBET.php?q="+id, true);
xmlhttp.send();

} }