我如何删除“上一个”和“下一个” innerHTML而不破坏它们

我正在研究一个英雄轮播，除了JS将控件的innerHTML分别设置为this.carouselControls[0]和this.carouselControls[1]，任何尝试将它们的删除都破坏了轮播的其余部分之外，其他一切看起来都很棒。

我尝试将其设置为空字符串，空值并一起更改值，但是设置JS的方式会破坏轮播的其余部分。

我在下面链接了Codepen，因为它更易于以可见形式共享css和html，我在这里和下面都有JS。我已经花了几个小时，无法解决这个问题。任何帮助对此表示感谢！

CodePen演示

const heroContainer = document.querySelector('.hero-container');
const heroControlsContainer = document.querySelector('.hero-controls');
//heroControls sets the class of the control which I need and the innerHTML which I dont.
const heroControls = ['previous', 'next'];
const heroItems = document.querySelectorAll('.hero-item');

class Carousel {
  constructor(container, items, controls) {
    this.carouselContainer = container;
    this.carouselControls = controls;
    this.carouselArray = [...items];
  }

  // Assign initial css classes for hero and nav items
  setInitialState() {
    this.carouselArray[0].classList.add('hero-item-first');
    this.carouselArray[1].classList.add('hero-item-previous');
    this.carouselArray[2].classList.add('hero-item-selected');
    this.carouselArray[3].classList.add('hero-item-next');
    this.carouselArray[4].classList.add('hero-item-last');
  }

  // Update the order state of the carousel with css classes
  setCurrentState(target, selected, previous, next, first, last) {

    selected.forEach(el => {
      el.classList.remove('hero-item-selected');

      if (target.className == 'hero-controls-previous') {
        el.classList.add('hero-item-next');
      } else {
        el.classList.add('hero-item-previous');
      }
    });

    previous.forEach(el => {
      el.classList.remove('hero-item-previous');

      if (target.className == 'hero-controls-previous') {
        el.classList.add('hero-item-selected');
      } else {
        el.classList.add('hero-item-first');
      }
    });

    next.forEach(el => {
      el.classList.remove('hero-item-next');

      if (target.className == 'hero-controls-previous') {
        el.classList.add('hero-item-last');
      } else {
        el.classList.add('hero-item-selected');
      }
    });

    first.forEach(el => {
     el.classList.remove('hero-item-first');

      if (target.className == 'hero-controls-previous') {
        el.classList.add('hero-item-previous');
      } else {
         el.classList.add('hero-item-last');
      }
    });

    last.forEach(el => {
      el.classList.remove('hero-item-last');

      if (target.className == 'hero-controls-previous') {
        el.classList.add('hero-item-first');
      } else {
        el.classList.add('hero-item-next');
      }
    });
  }

  // Construct the carousel navigation
  setNav() {
    heroContainer.appendChild(document.createElement('ul')).className = 'hero-nav';

    this.carouselArray.forEach(item => {
      const nav = heroContainer.lastElementChild;
      nav.appendChild(document.createElement('li'));
    });
  }

  // Construct the carousel controls
  setControls() {
    this.carouselControls.forEach(control => {
      heroControlsContainer.appendChild(document.createElement('button')).className = `hero-controls-${control}`;
    });
    //These set innerHTML to the controls
    !!heroControlsContainer.childNodes[0] ? heroControlsContainer.childNodes[0].innerHTML = this.carouselControls[0] : null;
    !!heroControlsContainer.childNodes[1] ? heroControlsContainer.childNodes[1].innerHTML = this.carouselControls[1] : null;

  }

  // Add a click event listener to trigger setCurrentState method to rearrange carousel
  useControls() {
    const triggers = [...heroControlsContainer.childNodes];

    triggers.forEach(control => {
      control.addEventListener('click', () => {
        const target = control;
        const selectedItem = document.querySelectorAll('.hero-item-selected');
        const previousSelectedItem = document.querySelectorAll('.hero-item-previous');
        const nextSelectedItem = document.querySelectorAll('.hero-item-next');
        const firstCarouselItem = document.querySelectorAll('.hero-item-first');
        const lastCarouselItem = document.querySelectorAll('.hero-item-last');

        this.setCurrentState(target, selectedItem, previousSelectedItem, nextSelectedItem, firstCarouselItem, lastCarouselItem);
      });
    });
  }
}

const exampleCarousel = new Carousel(heroContainer, heroItems, heroControls);

exampleCarousel.setControls();
exampleCarousel.setInitialState();
exampleCarousel.useControls();