Как сделать так, чтобы вместо текста заголовков вырезался сам li?

Вопрос-ответ HTML/CSS
1

Как сделать так, чтобы вместо только лишь текста заголовков вырезался сам li ? То есть, чтобы следуя скрипту вырезалось второе слово, а также все то, что внутри <li> , включая изображение.

const ul = document.querySelectorAll('.productdetails');
[].forEach.call(ul, (item) => {
const data = [...item.children].reduce((acc, n) => {
let t = n.innerText.indexOf(' ') != -1 ? n.innerText.split(' ')[1] : n.innerText;
let k = t[0].toLowerCase();
(acc[k] = acc[k] || []).push(t);
return acc;
  }, {});
  const html = Object
.entries(data)
.map(([ k, v ]) => `<div class="hua-rotate">${k}</div><ul class="${k}-litter">${v.join('')}</ul></div>`)
.join('');

  item.insertAdjacentHTML('afterend', html);
  item.remove();
});


<ul class="productdetails">
 <li><img src="https://i.stack.imgur.com/tpyIW.jpg?s=48&g=1"><a>Заголовок Acer</a></li>
  <li><img src="https://i.stack.imgur.com/tpyIW.jpg?s=48&g=1"><a>Заголовок Xiaomi</a></li>
<li><img src="https://i.stack.imgur.com/tpyIW.jpg?s=48&g=1"><a>Заголовок Samsung</a></li>
</ul>
2

Ты можешь вместо

  item.insertAdjacentHTML('afterend', html);
  item.remove();

делать просто
item.innerHTML = html;
(не вполне уверен, что это то, что тебе нужно, но по логике вроде похоже).

Но обрати внимание, что нарушается семантика.

3

Нет, не совсем то, мне требуется чтобы код, который я прикрепил не терял изображений при выводе

4

Тогда внутри .reduce тебе нужно вынимать не содержимое children, а все <a>, которые внутри <ul> и менять их содержимое, а не всего li. Иначе запутаешься куда каких детей запихивать.