0xD34F

Где удалять: const className = 'cart__counter';.

Как удалять:

const remove = el => el.innerText = parseInt(el.innerText);
// или
const remove = el => el.innerHTML = el.innerHTML.match(/\d+/)[0];
// или
const remove = el => el.textContent = el.textContent.replace(/\D/g, '');
// или
const remove = el => [ el.firstChild.data ] = el.firstChild.data.split(' ');
// или
const remove = el => el.childNodes[0].nodeValue = parseFloat(el.childNodes[0].nodeValue);

Удаляем:

document.querySelectorAll(`.${className}`).forEach(remove);

// или

for (const n of document.getElementsByClassName(className)) {
  remove(n);
}

Но вообще, это конечно костыль. Вы бы посмотрели - может есть возможность настроить корзину так, чтобы лишние надписи изначально не выводились.

Сортируем:

const arr = Object
  .entries(obj)
  .sort((a, b) => b[1] - a[1])
  .map(n => n[0]);

Или не сортируем, но всё равно получаем отсортированные данные (не надо так делать, работает только потому, что значения целые неотрицательные):

const arr = Object
  .values(Object.entries(obj).reduce((acc, n) => ((acc[n[1]] ??= []).push(n[0]), acc), {}))
  .reverse()
  .flat();

[...params.keys()].forEach(n => whiteList.includes(n) || params.delete(n));

Во-первых - вы передаёте в функцию строку и используете её в качестве селектора. Как быть с элементами, которые селектору не соответствуют? Они не будут найдены. Пусть функция сразу получает узел DOM-дерева.

Во-вторых - вы обходите childNodes, который представляет собой динамический NodeList и одновременно пытаетесь его модифицировать. Удаляя один узел, вы пропускаете следующий - т.е., если несколько текстовых узлов идут подряд, то удалён будет только каждый второй; а те нетекстовые узлы, которые расположены после текстовых, тут никакой рекурсии не случится, их содержимое вообще никак не будет обработано. Надо делать копию childNodes, и перебирать её. Или вместо for...of использовать цикл со счётчиком, при удалении узла счётчик увеличиваться не должен. Или перебирать childNodes от конца к началу - тоже цикл со счётчиком или reduceRight (да, это будет использование метода не совсем по назначению).

В-третьих - какой-то бред с nextElementSibling, не знаю, как это комментировать. Надо было просто вызвать функцию, передав ей текущий элемент.

В четвёртых:

const deleteTextNodes = node =>
  node.nodeType === Node.TEXT_NODE
    ? node.remove()
    : [...node.childNodes].forEach(deleteTextNodes);

// или

function deleteTextNodes(node) {
  if (node instanceof Text) {
    node.remove();
  } else {
    Array.prototype.reduceRight.call(node.childNodes, (_, n) => deleteTextNodes(n), null);
  }
}

const Button = ({ children, className = '', ...rest }) => (
  <button {...rest} className={`button ${className}`}>
    {children}
  </button>
);

Зачем вы дублируете в стейт пропсы? Не надо. Компонент Table - вырезать startDate и endDate, при запросе вместо них использовать props.startDate и props.endDate.

https://jsfiddle.net/zu6mnxpy/

во время рекурсивного вызова функции myCount переменная deep увеличивается на 1

Нечего её увеличивать.

Убрать =, вот здесь:

$deep += 1

urlList.findIndex(n => RegExp(`^${n.replace(/:\w+/g, '\\w+')}$`).test(url))

if (total_sum >= rand) {

Равенство лишнее, верхняя граница не должна учитываться. Из-за этого у вас перекос в результатах.

Ну и конечно можно всё это записать гораздо короче:

function getRandom(arr, key) {
  const rand = Math.random() * arr.reduce((acc, n) => acc + n[key], 0);
  let sum = 0;
  return arr.find(n => (sum += n[key]) > rand);
}


const obj = getRandom(data, 'weight');

Перебираем предыдущие элементы относительно кликнутого, пока не встретится подходящий:

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.oldValue')) {
    let input = t;
    while (!(input = input.previousElementSibling).matches('.value')) ;
    input.value = t.textContent;
  }
});

Или, вычисляем индекс кликнутого среди таких же как он, хватаем инпут с таким же индексом:

const inputs = document.querySelectorAll('.value');
const spans = [...document.querySelectorAll('.oldValue')];
const onClick = ({ target: t }) => inputs[spans.indexOf(t)].value = t.innerText;
spans.forEach(n => n.addEventListener('click', onClick));

Или, добавьте общие обёртки каждой паре input-span, и тогда можно будет подниматься до этой обёртки и искать нужный элемент внутри неё:

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('oldValue')) {
    t.closest('селектор общей обёртки').querySelector('.value').value = t.innerHTML;
  }
});

Про стили не понял, а стрелки... Встречный вопрос - почему они должны убираться? Вы эти элементы создали - сами и решайте, что с ними делать. Например, можно их показывать/прятать при создании/уничтожении слайдера. После инициализации/дестроя у контейнера переключается класс swiper-container-initialized, можно назначать нужные стили в зависимости от его наличия:

.swiper-container:not(.swiper-container-initialized) {
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none;
  }
}

Потому что при преобразовании массива в строку, согласно спецификации, используется метод join. Который по умолчанию в качестве разделителя (опять же, согласно спецификации) использует запятую.

"Как убрать" - очевидно, вызывать join самостоятельно, указывая пустую строку.

В props добавить value: Boolean,, а в <toggle-button -

:value="value"
@input="$emit('input', $event)"

Или, в <toggle-button добавить v-on="$listeners".

let isBtn1Clicked = false;

button1.addEventListener('click', () => isBtn1Clicked = true);
button2.addEventListener('click', () => {
  if (isBtn1Clicked) {
    // ...
  }
});

или

button1.addEventListener('click', e => e.target.classList.add('clicked'));
button2.addEventListener('click', () => {
  if (button1.classList.contains('clicked')) {
    // ...
  }
});

или

button2.disabled = true;

button1.addEventListener('click', () => button2.disabled = false);
button2.addEventListener('click', () => {
  // ...
});

или

button2.hidden = true;

button1.addEventListener('click', () => button2.hidden = false);
button2.addEventListener('click', () => {
  // ...
});

или

button1.addEventListener('click', () => {
  button2.addEventListener('click', () => {
    // ...
  });
}, { once: true });

const obj = Object.fromEntries(arr.map(n => [ n.name, n.number ]));
// или
const obj = arr.reduce((acc, n) => (acc[n.name] = n.number, acc), {});
// или
const obj = Object.assign({}, ...arr.map(n => ({ [n.name]: n.number })));

Или, в более общем виде:

function toObj(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const obj = {};

  for (const n of data) {
    obj[getKey(n)] = getVal(n);
  }

  return obj;
}

Пользоваться этим можно так (ваш случай):

const obj = toObj(arr, 'name', 'number');
// {Kolya: '5', Olga: '10'}

А можно так:

const charCodes = toObj('abc', n => n.charCodeAt());
// {97: 'a', 98: 'b', 99: 'c'}

И даже так тоже можно:

<input name="xxx" value="69">
<input name="yyy" value="187">
<input name="zzz" value="666">

const inputValues = toObj(document.querySelectorAll('input'), 'name', 'value');
// {xxx: '69', yyy: '187', zzz: '666'}

погуглил за вас

position: fixed;
right: 0;
top: 0;