Как изменить структуру элементов списка с помощью JS, чтобы решить сгенерированное встроенным блоком пространство между ними

Одним из способов удаления пробела между элементами списка при использовании inline-block является изменение этого кода:

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

к этому коду:

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul><li>
    Item 1</li><li>
    Item 2</li><li>
    Item 3</li>
</ul>

который отлично работает.

Вопрос в том, как изменить структуру li первого кода на структуру второго кода, используя Javascript чистый.

javascript html

29.05.2019 14:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать что-то вроде этого:

const ul = document.querySelector('ul');
const iterator = document.createNodeIterator(ul, NodeFilter.SHOW_TEXT, node => {
  if (node.parentElement.nodeName === 'UL') {
    return NodeFilter.FILTER_ACCEPT;
  }
  return NodeFilter.FILTER_REJECT;
});

const toBeRemoved = [];
let next = iterator.nextNode();
while(next) {
  toBeRemoved.push(next);
  next = iterator.nextNode();
}

toBeRemoved.forEach(n => n.remove());

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Что это делает, так это создает NodeIterator для перебора всех text узлов элемента UL и сохраняет только те узлы, у которых UL является их первым предком.

Совершенный и расширяемый. Спасибо.

— 29.05.2019 14:45

29.05.2019 14:43