Удаление элемента по клику после того как результат записан JS

Question

Есть код генерации табов на 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>

Answer 1

Если Вы просто хотите удалялся один единственный блок .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>

БЛОГ НА HUSL

Удаление элемента по клику после того как результат записан JS

Ответы (1 шт):