Сергей Соколов

document.queryeSelectorAll('.main-menu__item')
  .forEach(elem => elem.remove());

$$('.main-menu__item')
  .forEach(elem => elem.remove());

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

let arr = [
    {car: 'audi' , color: 'red'},
    {car: 'audi' , color: 'black'},
    {car: 'bmv' , color: 'black'},
    {car: 'bmv' , color: 'red'},
    {car: 'mers' , color: 'black'},
]
const unique = (array) => [...new Set(array.map(item => item.car))];

console.log(unique(arr))

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

const itemSelector = '.product';
const activeClass = 'checked';
const disabledClass = 'unchecked';
const activeLimit = 3;

document.addEventListener('click', e => {
  const cl = e.target.closest(itemSelector)?.classList;
  if (cl && !cl.contains(disabledClass)) {
    cl.toggle(activeClass);
    updateDisabled();
  }
});

updateDisabled();

function updateDisabled() {
  const [ notActive, active ] = Array.prototype.reduce.call(
    document.querySelectorAll(itemSelector),
    (acc, n) => (acc[+n.classList.contains(activeClass)].push(n), acc),
    [ [], [] ]
  );

  const limitReached = activeLimit <= active.length;
  notActive.forEach(n => n.classList.toggle(disabledClass, limitReached));
}

const items = [...document.querySelectorAll(itemSelector)];
let activeCount = 0;

items.forEach(n => n.addEventListener('click', onClick));

updateDisabled(items.filter(n => n.classList.contains(activeClass)).length);

function onClick({ currentTarget: { classList: cl } }) {
  if (!cl.contains(disabledClass)) {
    updateDisabled(cl.toggle(activeClass) ? 1 : -1);
  }
}

function updateDisabled(change) {
  const limitReached = (activeCount += change) >= activeLimit;
  for (const { classList: cl } of items) {
    cl.toggle(disabledClass, !cl.contains(activeClass) && limitReached);
  }
}