jQueryを使用してテキストをリセットし、AJAXコールを表示します。

Question

現在、jQueryを使用してAjaxコールを作成しています。ユーザーが国に入って検索ボタンを押すと、APIにAJAX呼び出しが行われます。ユーザーは、検索した国について表示されているランダムな事実を確認します。 私の問題は、ユーザーがフォームをリセットできるようにして、事実が自動的に消えてしまうことです。私はこの点に着きましたが、第二の国に入ると、事実はもうポップアップしたくありません。 私は、ページ上のいくつかの要素をアニメーション化するためにcss.animateを使用していることにも言及する必要があります。それが物事を乱すかもしれないのだろうか。誰でもここで私を助けることができますか？私は本当にこのシンプルなウェブサイトに仕上げをつけたいと思っています。ここで

は私の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> 

そして、私の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

あなたは

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

を呼び出したとき、もはや彼らので、あなたは、すべての子要素を削除しているので存在する。あなたは子供からテキストを削除する必要があります。あなたは内のすべての要素を失うので、

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

Answer 2

は、div時.text("")を使用しないでください。また、.empty()を使用することもできます。だから、

に行を変更：$(".world_facts p").empty();

ここでは例です：

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

Answer 3

あなたは（意図したように）その要素内のすべての個々のノードからテキストを削除したがされていません$(".world_facts").text("")行うことによっては、あなたは基本的にその特定の部門内の内容の全体を削除します

代わりに次の方法でリセットすることができます：

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

このセレクタのターゲットworld_factsコンテナ内のすべての即時<p>と空白

例にそのテキストを設定します。

$('.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>