Алексей

Ищи по индексу. Сам элемент получай arr[index], а потом arr.splice(index, 1)

Разумеется можно. Проблема лишь во времени и сложности. Фреймворки значительно ускоряют и упрощают разработку. На нативном js придется самостоятельно думать о многих вещах. Например поддержка событий в разных браузерах и т.д. В конечном итоге в приложении на js за основу пойдет самописный фреймворк, который будет сложно поддерживать

Использовать стрелочную функцию в обработчике клика, либосразу указать эту функцию, а не заворачивать функцию в функцию

Первый вариант совершенно не читабелен и ему есть альтернатива в виде верстки js (2 вариант), но с ним проще генерировать virtual Dom (привет реакт)

Второй вариант удобен тем что есть возможность сразу и наглядно подставлять данные и генерировать блоки верстки, при этом не засоряя Dom ни лишними блоками ни лишними слушателями. Сложнее создать virtual Dom, т.к нужно много парсить

Третий вариант Засоряет все и вся блоками, слушателями и вообще медленный

Если реакт нужен чтобы добавить какой то новый модуль - добавляйте ничего не переделывая. Проблем с этим нет. Если нужно весь проект переписать - то только вручную

Создайте класс с полями - значениями фильтров и рендерите результат с учетом всех этих фильтров. Так же в этом классе добавьте методы срабатывающие при переключении фильтров и меняющие значения фильтров в соответствующих полях класса

class FigureFilter {
  size = null;
  color = null;
  shape = null;
  
  constructor(selector) {
    this.allFiguresNode = document.querySelectorAll(selector);
  }

  /**
   * Эти свойства юзать при нажатии на кнопки
   */
  changeSize(size) {
    this.size = size;
    this.#render();
  }

  changeColor(color) {
    this.color = color;
    this.#render();
  }

  changeShape(shape) {
    this.shape = shape;
    this.#render();
  }

  /**
   * Эти не трогать
   */
  #render() {
    [...this.allFiguresNode].forEach(figure => {

      this.#checkFigure(figure, 'size');
      this.#checkFigure(figure, 'color');
      this.#checkFigure(figure, 'shape');
    })
  }
  
  #checkFigure(figure, area) {
    figure.dataset[area] === this[area]
      ? this.#showFigure(figure)
      : this.#hideFigure(figure);
  }
  
  #showFigure(el) {
    el.setAttribute('hidden', true);
  }
  
  #hideFigure(el) {
    el.removeAttribute('hidden');
  }
}

Набросал на скорую руку пример такого класса

Для начала - вебпак не забыли запустить?
в консоли, в директории с проектом команда webpack или webpack --watсh, если хотите отслеживать изменения

кнопку создаете, но никуда в DOM не помещаете

let func=()=> {
    button.remove();

 let button_ok=window.document.createElement('button');
    window.document.createElement('button');
    button_ok.className='ok';
}

очень странная функция. Допустим в первой строке вы создали элемент, то дальше логично добавить класс и потом поместить в DOM, вместо этого вы просто два раза создали элемент и присвоили класс