0xD34F

document.querySelectorAll('button').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const count = (+this.dataset.clickCount || 0) + 1;
  this.innerText = `clicked: ${count}`;
  this.dataset.clickCount = count;
}

$('span').text((i, text) => text[0] === '-' ? text : `+${text}`);

или

document.querySelectorAll('span').forEach(n => {
  n.innerText = n.innerText.replace(/^(?!-)/, '+');
});

или

for (const n of document.getElementsByTagName('span')) {
  n.textContent = '+'.slice(n.textContent[0] === '-') + n.textContent;
}

function find(arr, id) {
  for (const { name, hobbies } of arr) {
    const { title } = hobbies.find(n => n.id === id) || {};
    if (title) {
      return { name, title };
    }
  }

  return null;
}


const data = find(arr, 4);

Делаем нормально: [...new Set(arr)].

И ненормально:

Object.values(arr.reduce((acc, n) => (acc[n] = n, acc), {}))

// или

Array.from(new Map(arr.map(n => [ n, n ])).values())

// или

arr.filter(function(n) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

// или

arr.filter(((picked, n) => !picked.set(n, picked.has(n)).get(n)).bind(null, new Map))

// или

arr.filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

https://jsfiddle.net/6eLg3a8v/1/

$('p select').change(function() {
  $(this)
    .parent()
    .find('.colors').hide()
    .end()
    .find(`.${this.value}`).show();
});

const input = document.querySelector('#textLink');
const buttonSelector = '.link';

Делегирование, назначаем обработчик клика один раз:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = button.innerText;
  }
});

Или, назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = e.currentTarget.textContent);

$('select')
  .last()
  .clone()
  .attr('id', (i, id) => id.replace(/\d+$/, m => +m + 1))
  .appendTo('body');

Не вижу явного удаления из дом дерева.

Неявно тоже ничего не удаляется - элемент перенесён в .js-select-tabs-head, неужели этого не видно? Или вы думаете, что там другой элемент, копия? Это не так - можете получить элемент до вызова html, после, сравнить их, увидите, что это один и тот же элемент.

Хотите, чтобы происходило копирование вместо перемещения... Ну, очевидно же:

$head.html($text.filter('.is-active').clone()).

При подключении обработчиков клика к кнопкам навигации, сами кнопки вы ищите внутри формы - а их там нет.

Замените

form.on("click", ".next", function(event) {

на

$(".next").on("click", function(event) {

Аналогично и с .back.

Ну или засуньте кнопки в форму.

При замене вместо строки используйте регулярное выражение, соответствующее строке и произвольному количеству символов. Т.е, замените

this.api = this.api.replace(word, 'BOOM')

на что-то вроде

this.api = this.api.replace(RegExp(`\\b${word}[a-z]*\\b`, 'ig'), 'BOOM')

Возвращайте this из всех методов, которые могут быть не последними в цепочке вызовов:

function calc(val) {
  const self = Object.create(calc.prototype);
  self.val = val;
  return self;
}
calc.prototype = {
  plus(val) {
    this.val += val;
    return this;
  },
  minus(val) {
    this.val -= val;
    return this;
  },
  valueOf() {
    return this.val;
  },
};

+calc(0).plus(1); // 1
+calc(1).plus(1).plus(1); // 3
+calc(1).plus(2).plus(3).plus(4).minus(5); // 5
calc(3).plus(7).minus(2) * 3; // 24
99 + calc(1); // 100

Создаём новый массив:

const newArr = arr.slice(-5);

Или, обновляем существующий:

arr.splice(0, arr.length - 5);

const kebab = str => str.replace(/\b([A-Z][a-z]*)+\b/g, n => n.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase());

console.log(kebab('KebabCase noKebabCase No_Kebab_Case And FuckDonaldTrump!!')); // "kebab-case noKebabCase No_Kebab_Case and fuck-donald-trump!!"

for (const n of words) {
  string = string.replace(RegExp(`\\b${n}\\b`, 'gi'), m => `<a href="#">${m}</a>`);
}

или

const newString = words.reduce((acc, n) => {
  return acc.replace(RegExp(`\\b${n}\\b`, 'gi'), '<a href="#">$&</a>');
}, string);

Посмотрел поддержку forEach: она отличная.

Это другой forEach - принадлежащий Array.prototype. У вас ошибка возникает из-за отсутствия NodeList.prototype.forEach.

Что можно сделать:

• Найти/написать самостоятельно и добавить полифилл
  
• Использовать forEach массива:
  
  

  Array.prototype.forEach.call(items, function(n) {
    // ...
  });

  
  
• Использовать обычный цикл со счётчиком:
  
  

  for (var i = 0; i < items.length; i++) {
    // ...
  }

  
  
• В IE не заработает, а вот в Safari 9, говорят, должно:
  
  

  for (var n of items) {
    // ...
  }

  
  

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

const el = currentTarget.querySelector('селектор элемента');
if (el) {
  el.remove();
}

Из какой таблицы и какого столбца надо получить данные:

const tableEl = document.querySelector('селектор_таблицы');
const colIndex = индекс_столбца;

Получаем:

const colData = Array.from(
  tableEl.rows,
  ({ cells: { [colIndex]: n } }) => n && n.textContent
);

// или

const colData = Array.prototype.map.call(
  tableEl.querySelectorAll(`tr > :nth-child(${colIndex + 1})`),
  n => n.innerText
);

// или

const colData = [];
for (const n of table.querySelectorAll('tr')) {
  colData.push((n.children[colIndex] || {}).innerHTML);
}

Где элементы находятся и какой класс надо удалить:

const parentSelector = '.parent';
const className = 'custom';

Удаляем:

document.querySelectorAll(`${parentSelector} > .${className}`).forEach(n => {
  n.classList.remove(className);
});

// или

for (const n of document.querySelector(parentSelector).children) {
  n.className = n.className.replace(RegExp(`(^| )${className}(?= |$)`), '').trim();
}