How do I remove the "previous" and "next" innerHTML without breaking them

Question

I am working on a hero carousel and everything looks amazing except for the fact that the JS is setting the innerHTML of the controlls to this.carouselControls[0] and this.carouselControls[1] respectively and any attempt to remove them breaks the rest of the carousel.

I have tried setting it to an empty string, a null value and changing the value all together but the way the JS is set up, it breaks the rest of the carousel.

I have the codepen linked below because its easier to share the css and html in viewable form, I have the JS there as well as below. I have spent hours and can't figure this out. Any help on this is much appreciated!

CodePen Demo

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();

Answer 1

I'm assuming you want to get rid of of the next button showing up on your left arrow, therefore you should get rid those lines which seem unnecessary anyway.

 //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;