Text zurücksetzen mit jQuery, mit AJAX-Anruf vorhanden

Question

Ich übe derzeit Ajax-Aufrufe mit jQuery. Der Benutzer gibt ein Land ein, drückt die Suchtaste und der AJAX-Anruf wird an die API gesendet. Der Benutzer sieht dann zufällige Fakten über das Land, nach dem er gesucht hat. Mein Problem ist, dass ich dem Benutzer erlauben, das Formular zurückzusetzen, und die Fakten automatisch verschwinden. Ich bin auf diesen Punkt gekommen, aber wenn ich in ein zweites Land eintrete, wollen die Fakten nicht mehr auftauchen. Ich sollte auch erwähnen, dass ich css.animate verwende, um einige Elemente auf der Seite zu animieren. Ich frage mich, ob das Dinge vermasseln könnte. Kann mir hier jemand helfen? Ich möchte dieser einfachen Website wirklich den letzten Schliff geben.

Hier ist mein HTML:

<h1 class = "animated infinte bounce"> World Facts </h1> 
    <div class = "info"> 
     <p> Enter in a country to get some information about it! </p> 
      <form class = "zipform"> 
       <input type ="text" class = "pure-input-rounded"> 
       <button type = "submit" class = "pure_button"> Search </button> 
       <input type="reset" value="Reset"> 
      </form> 
      <div class = "world_facts"> 
       <p id = "region"> </p> 
       <p id = "capital"> </p> 
       <p id = "people"> </p> 
       <p id = "nat_name"> </p> 
       <p id = "domain"> </p> 
      </div> 
    </div> 

Und meine JS/jQuery:

`$('.pure_button').click(function(e) { 
e.preventDefault() 
    console.log("click noticed") 

$.ajax({ 


    url: //API URL HERE, 
    type: "GET", 
    success: function(data) { 
     var country = $('.pure-input-rounded').val(); 
     console.log("This works too") 
     debugger 
     console.log(data) 
     var capital = data[0].capital 
     var people = data[0].demonym 
     var region = data[0].region 
     var nat_name = data[0].nativeName 
     var domain = data[0].topLevelDomain 
     $('.world_facts').addClass("animated fadeInDown") 
     $('#region').text(country + " is located in " + region + ".") 
     $('#capital').text("Its capital is " + capital + ".") 
     $('#people').text("People from " + country + " are called " + people + ".") 
     $('#nat_name').text(people + " people call their country " + nat_name + ".") 
     $('#domain').text("Websites registered in " + country + " have the top level domain name of " + domain + ".") 
    } 
    }); 
}); 

$(":reset").click(function(e) { 
    e.preventDefault() 
     $(".zipform")[0].reset() 
     console.log("Form reset") 
     $(".world_facts").text("") 

    });` 

Answer 1

Denn wenn man

$(".world_facts").text("") 

Sie rufen alle Kinder Elemente zu entfernen, so dass sie nicht mehr existieren. Sie müssen den Text von den Kindern entfernen.

$(".world_facts p").text("") 

Answer 2

nicht .text("") auf dem div Verwenden Sie, da Sie in alle Elemente verlieren. Außerdem können Sie .empty() verwenden.

So ändern Sie die Zeile an: $(".world_facts p").empty();

Hier ist ein Beispiel:

http://jsbin.com/didumiyexi/1/edit

Answer 3

von $(".world_facts").text("") tun Sie nicht Text von allen einzelnen Knoten innerhalb dieses Elements zu entfernen, sondern (wie beabsichtigt) Sie entfernen im Wesentlichen den gesamten Inhalt dessen, was in diesem bestimmten div

ist Sie können es stattdessen auf folgende Weise zurücksetzen:

$('.world_facts > p').text(""); 

Dieser Selektor Ziele jeder sofort <p> innerhalb des world_facts Behälter und seinen Text

Beispiel leer setzt:

$('.pure_button').click(function(e) { 
 
    e.preventDefault() 
 
    console.log("click noticed") 
 

 
    var data = [{ 
 
    capital: 'London', 
 
    demonym: 'British', 
 
    region: 'Europe', 
 
    nativeName: 'UK', 
 
    topLevelDomain: 'co.uk' 
 
    }]; 
 

 

 
    var country = $('.pure-input-rounded').val(); 
 
    var capital = data[0].capital 
 
    var people = data[0].demonym 
 
    var region = data[0].region 
 
    var nat_name = data[0].nativeName 
 
    var domain = data[0].topLevelDomain 
 
    $('.world_facts').addClass("animated fadeInDown") 
 
    $('#region').text(country + " is located in " + region + ".") 
 
    $('#capital').text("Its capital is " + capital + ".") 
 
    $('#people').text("People from " + country + " are called " + people + ".") 
 
    $('#nat_name').text(people + " people call their country " + nat_name + ".") 
 
    $('#domain').text("Websites registered in " + country + " have the top level domain name of " + domain + ".") 
 

 
}); 
 

 
$(":reset").click(function(e) { 
 
    e.preventDefault(); 
 
    $(".zipform")[0].reset(); 
 

 
    // instead, clear each form separately 
 
    $('.world_facts > p').text(""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<h1 class="animated infinte bounce"> World Facts </h1> 
 
<div class="info"> 
 
    <p>Enter in a country to get some information about it!</p> 
 
    <form class="zipform"> 
 
    <input type="text" class="pure-input-rounded"> 
 
    <button type="submit" class="pure_button">Search</button> 
 
    <input type="reset" value="Reset"> 
 
    </form> 
 
    <div class="world_facts"> 
 
    <p id="region"></p> 
 
    <p id="capital"></p> 
 
    <p id="people"></p> 
 
    <p id="nat_name"></p> 
 
    <p id="domain"></p> 
 
    </div> 
 
</div>