Bearbeiten von Tag explorer.js

Question

Ich möchte die Buchstaben entfernen, die auf der linken Seite der von tag-explorer.js erzeugten Tags angezeigt werden. Wie kann ich das erreichen?

Hier ist die Live-Website: https://ewelinawoloszyn.github.io/Research/research_03.html

Hier ist das Skript:

// The container to hold the tags. 
tagContainer = document.querySelector('.tag-container'); 
// An array of objects where the `'element'` property is the article element (to 
// be hidden), and the `'tags'` attribute is an array of tags on this article. 
// Articles do not necessarily have to be the <article> element. 
articles = [].slice.call(document.querySelectorAll('article')).map(function (article) { 
    return { 
    'element': article, 
    'tags': [].slice.call(article.querySelectorAll('.tags li')).map(function (tag) { 
    return tag.textContent; 
    }) 
    }; 
}); 
// Create an array of tag names to be available for filtering. 
tagNames = ['Public Finance', 'Access', 'Data','Money','Open Source']; 
// Initialise tag-explorer. 
tagExplorer(tagContainer, articles, tagNames); 

Hier ist die gewünschte Ausgabe - ich die roten Buchstaben entfernt werden gekreuzt möchten:

Irgendwelche Beratung sehr geschätzt.

Answer 1

Sie können diese Buchstaben verbergen, indem sie einige Arten in der Datei zu verändern style.css:

Veränderung dieser:

.tag-container .letter-header { 
    display: inline-block; 
    padding: 0 1em; 
} 
.tag-container button { 
    background-color: #AAA; 
    color: #fff; 
    -moz-border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
    border: 0px; 
    padding: 1px 6px; 
} 

dazu (Änderungen mit /* .. */ gekennzeichnet sind):

.tag-container .letter-header { 
    display: none; /* <!-- modified */ 
    padding: 0 1em; 
} 
.tag-container button { 
    margin: 0 5px;  /* <!-- added */ 
    background-color: #AAA; 
    color: #fff; 
    -moz-border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
    border: 0px; 
    padding: 1px 6px; 
} 

Die Beim ersten Wechsel werden die Buchstaben nicht gerendert. Ohne weitere Änderungen würden die Tags (Buttons) aneinander haften bleiben. Die zweite Änderung beschäftigt sich damit und führt einen leeren Raum zwischen ihnen ein.