我正在尝试编写JavaScript代码，它将应用一个FA刻度图标到一个点击的日子，如果那里还没有刻度，如果有刻度，则删除该刻度。我已经编写了附加图标的代码，但无法确定如何删除它
这是我的
HTML
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
JS
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
const tick = document.createElement('i');
tick.classList = 'fas fa-check-square fa-4x'
this.append(tick);
});
}
您可以检查元素i是否已经存在，如果不存在，则创建元素并将类添加到元素中。如果存在，则移除该元素。
您可以尝试以下方式：
null
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
if(!this.querySelectorAll('i').length){ // check if i is not exist
const tick = document.createElement('i');
this.append(tick);
tick.classList.add('fas', 'fa-check-square', 'fa-4x'); // add classes
}
else{
var elem = this.querySelector('i');
elem.parentNode.removeChild(elem); // remove i
}
})
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
您可以尝试将id添加到图标中&检查id以确定它是否存在。
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
const check_square_icon = `check-square-icon-${i}`
if(document.contains(document.getElementById(check_square_icon))) {
document.getElementById(check_square_icon).remove();
} else {
const tick = document.createElement('i');
tick.id = `check-square-icon-${i}`
tick.classList = 'fas fa-check-square fa-4x'
this.append(tick);
}
})
}
