ボタンをクリックする前に、前に追加されたリスト項目を削除します。

Question

私のプロジェクトにWikipedia APIを使用しています。引用符を表示するためにボタンをクリックすると、私のコードは特定の著者に関連するulにwikipediaの記事を動的に追加します。しかし、私がボタンをクリックすると、他の作者の新しいliがulに追加されたので、古い記事（li）は削除されません。 ulに追加する前にforループにコードを入れようとしましたが、ボタンをクリックすると、すべてではなく1つの記事だけが追加されます。

私のコードは次のとおりです。

var getWikiAuthorBio = function(author) { 
    var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + author + '&format=json&callback=wikiCalback' 

////////////// 
//Wiki request 
///////////// 
var wikirequest = function() { 
    $.ajax({ 
     url:url, 
     dataType: 'jsonp', 
     success: function(wikiData) { 

     // Fetch the biographical information 
     var bioName = wikiData[2][0]; 

     // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices 
     if (bioName.indexOf('may refer to') >= 0) { 
     bioName = wikiData[2][1]; 
     } else { 
     var bioName = wikiData[2][0]; 
     } 

     var wikiArcticles = wikiData[1]; 
     var wikiArticlesShortInfo = wikiData[2] 
     console.log(wikiArticlesShortInfo); 

     for (var i=0; i < wikiArcticles.length; i++) { 

     console.log("Each article " + wikiArcticles[i]); 
     domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>'); 
     } 

     // Short biography 
     console.log(bioName); 
     console.log(wikiArcticles); 
     console.log(url); 

     domCache.$bioDiv.text(bioName); 



     } // end of success 
    }); 
}// wikirequest 

wikirequest(); 

} 

Link to Codepen

Answer 1

はまた、jQueryのempty機能を使用することができます。 forループ

Answer 2

があなたのループの前にあなたのリストを空にします。

var getWikiAuthorBio = function(author) { 
 
    var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + author + '&format=json&callback=wikiCalback' 
 

 
////////////// 
 
//Wiki request 
 
///////////// 
 
var wikirequest = function() { 
 
    $.ajax({ 
 
     url:url, 
 
     dataType: 'jsonp', 
 
     success: function(wikiData) { 
 

 
     // Fetch the biographical information 
 
     var bioName = wikiData[2][0]; 
 

 
     // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices 
 
     if (bioName.indexOf('may refer to') >= 0) { 
 
     bioName = wikiData[2][1]; 
 
     } else { 
 
     var bioName = wikiData[2][0]; 
 
     } 
 

 
     var wikiArcticles = wikiData[1]; 
 
     var wikiArticlesShortInfo = wikiData[2] 
 
     console.log(wikiArticlesShortInfo); 
 

 
     domCache.$wikiArticlesList.html(''); // <--- add this 
 
     for (var i=0; i < wikiArcticles.length; i++) { 
 

 
     console.log("Each article " + wikiArcticles[i]); 
 
     domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>'); 
 
     } 
 

 
     // Short biography 
 
     console.log(bioName); 
 
     console.log(wikiArcticles); 
 
     console.log(url); 
 

 
     domCache.$bioDiv.text(bioName); 
 

 

 

 
     } // end of success 
 
    }); 
 
}// wikirequest 
 

 
wikirequest(); 
 

 
}

Answer 3

前に入れ

domCache.$wikiArticlesList.empty();

代わり.appendの.htmlを試してください。

domCache.$wikiArticlesList.html('<li class="articleItem">'+ wikiArcticles[i]+ '</li>') 

またはちょうどあなたが新しいものを追加する前に、最後の1を削除する：

domCache.$wikiArticlesList.children('li:last').remove(); 
domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>') 

Answer 4

.append()またはを使用できます。

// with .append() 
domCache.$wikiArticlesList.empty(); 
for (var i=0; i < wikiArcticles.length; i++) { 

    console.log("Each article " + wikiArcticles[i]); 
    domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>'); 
} 

// with .html() 
var wikiArticlesListHtml = ''; 
for (var i=0; i < wikiArcticles.length; i++) { 

    console.log("Each article " + wikiArcticles[i]); 
    html += '<li class="articleItem">'+ wikiArcticles[i]+ '</li>\n'; 
} 
domCache.$wikiArticlesList.html(wikiArticlesListHtml); 

注：HTMLを含む複数の文字列だけで.append()作品、.html()はHTMLのみを含む文字列を使用しています一方。