Stack Overflow на русском Asked on November 5, 2021
Есть код генерации табов на JS. При нажатии на вкладки происходит "вырезание" контента из общего списка в блок результата в соответствии с его буквой. Как сделать так, чтобы при вставке в блок результата, <ul class="productdetails"> удалялся из верстки?
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetails li').forEach((el, i) => {
const letter = el.innerText.split(' ')[1][0];
letters.push(letter);
letters = [...new Set(letters)];
itemList.push({
id: i,
content: el.innerHTML,
letter: letter
});
document.querySelector('.results .tabs').innerHTML =
letters.map(el => {
return `<li>${el}</li>`
});
});
document.querySelectorAll('.tabs li').forEach(tab => {
tab.onclick = (e) => {
document.querySelector('.results .content').innerHTML =
itemList.filter(item => item.letter === e.target .innerText).map(item => item.content);
}
});.results {
border: 2px solid black;
}
.results .tabs li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid red;
} <div class="results">
<ul class="tabs"></ul>
<ul class="content"></ul>
</div>
<ul class="productdetails">
<li class="product-container">
<h3 class="prod-list-choose">Заголовок A</h3>
</li>
<li class="product-container">
<h3 class="prod-list-choose">Заголовок B</h3>
</li>
<li class="product-container">
<h3 class="prod-list-choose">Заголовок C</h3>
</li>
</ul>Если Вы просто хотите удалялся один единственный блок .productdetailt по событию onClick, после того как результат будет записан, то:
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetails li').forEach((el, i) => {
const letter = el.innerText.split(' ')[1][0];
letters.push(letter);
letters = [...new Set(letters)];
itemList.push({
id: i,
content: el.innerHTML,
letter: letter
});
document.querySelector('.results .tabs').innerHTML =
letters.map(el => {
return `<li>${el}</li>`
});
});
document.querySelectorAll('.tabs li').forEach(tab => {
tab.onclick = (e) => {
document.querySelector('.results .content').innerHTML =
itemList.filter(item => item.letter === e.target.innerText).map(item => item.content);
const pd = document.querySelector(".productdetails")
if (pd) {pd.remove()}
}
});.results {
border: 2px solid black;
}
.results .tabs li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
.productdetails {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1000;
}<div class="results">
<ul class="tabs"></ul>
<ul class="content"></ul>
</div>
<ul class="productdetails">
<li class="product-container">
<h3 class="prod-list-choose">Заголовок A</h3>
</li>
<li class="product-container">
<h3 class="prod-list-choose">Заголовок B</h3>
</li>
<li class="product-container">
<h3 class="prod-list-choose">Заголовок C</h3>
</li>
</ul>Answered by Vasily on November 5, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP