Сбросить текст, используя jQuery, с вызовом AJAX, присутствующим

Question

В настоящее время я практикую создание Ajax-вызовов с использованием jQuery. Пользователь входит в страну, нажимает кнопку «Поиск», а вызов AJAX выполняется в API. Затем пользователь видит случайные факты, отображаемые в стране, которую они искали. Моя проблема заключается в том, что я хочу разрешить пользователю сбросить форму, и факты автоматически исчезнут. Я встал до этого момента, но когда я вхожу во вторую страну, факты больше не хотят появляться. Следует также упомянуть, что я использую 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

Не используйте .text("") на div, так как вы потеряете все элементы внутри. Кроме того, вы можете использовать .empty().

Таким образом, изменить линию: $(".world_facts p").empty();

Вот пример:

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

Answer 3

Поступая $(".world_facts").text("") вы не удаляя текст из всех отдельных узлов внутри этого элемента, но (как предполагалось) вы в основном удаляете весь контент того, что находится внутри этого конкретного div

Вы можете сбросить его следующим образом:

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

Этот селектор цели каждый непосредственный <p> внутри world_facts контейнера и устанавливает его текст в пустой

Например:

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