0xD34F

moment.utc(moment.duration(endTime) - moment.duration(startTime)).format('HH:mm')

var delayAnim = 4;
<...>
'animation-delay': '.' + delayAnim + 's'

Круто. Секунды, которые на самом деле не секунды, а десятые доли секунды. Пишите сразу 0.4 при объявлении переменной, не вводите людей в заблуждение.

Ну а само увеличение делается элементарно - добавляйте к исходному значению индекс, умноженный на шаг:

'animation-delay': (delayAnim + 0.2 * index) + 's'

удаляются последовательно только теги tr <...> вложенные теги td остаются

Не вложенные. Давайте повнимательнее взглянем на создание новой строки в таблице:

table.appendChild(tr);
<...>
table.appendChild(tdLeft);  // "Название"
table.appendChild(tdRight); //"Описание"
table.appendChild(tdDelete); //"Навигация"

Ячейки у вас добавляются непосредственно в tbody, а вовсе не в tr.

Кроме того, обработчики клика по кнопкам удаления у вас добавляются один раз, при загрузке страницы, то есть кнопки всех добавленных пользователем строк обработчиков клика иметь не будут. Вам следует освоить такой приём, как делегирование.

UPD. Исправлено.

Функция объявлена внутри другой функции, и использовать первую вы пытаетесь за пределами второй - естественно, там её нет. Области видимости в js - бегом гуглить и разбираться, это основы.

function getWinCount(team) {
  const el = Array
    .from(document.querySelectorAll('.table-item__name'))
    .find(n => n.textContent === team);

  return el ? +el.closest('tr').children[3].textContent : null;
}


const wins = getWinCount('Уфа');

UPD. Вынесено из комментариев:

Мой браузер не поддерживает ES-2015

На будущее: о таких вещах следует говорить сразу.

Будет работать в IE11:

function getWinCount(team) {
  var el = null;

  [].concat.apply([], document.querySelectorAll('.table-item__name')).forEach(function(n) {
    if (!el && n.textContent === team) {
      el = n;
    }
  });

  if (!el) {
    return null;
  }

  do {
    el = el.parentNode;
  } while (el.tagName !== 'TR');

  return +el.children[3].textContent;
}

Индекс неправильный. Нужное вам значение передаётся первым параметром в each:

$('.container').find('h2, h3').each(function(i) {

Его и используйте:

text = $('.select-list li a').eq(i).text();

не надо код, подскажите алгоритм

Думаю, это уже не актуально - раз вы опубликовали собственный вариант. Так что просто код:

function shorten(val) {
  if (val <= 10000) {
    return val.toString();
  }

  const thousands = val / 1000;
  const rounded = Math.round(thousands);
  const deviation = Math.sign(thousands - rounded);

  return `${[ '≈', '', '>' ][deviation + 1]}${rounded} т.`;
}

Ну и откуда тогда должна браться цена, если селект с ценой отсутствует? Можете подставлять случайное значение - как, подойдёт такой ответ? Нет? Тогда дополняйте вопрос.

UPD.

Цена завернута в див price prc-new

ОК, тогда замените

$('[name="variant"] option:checked').data('price')

на

$('.price.prc-new span').text()

$('input').on('input', function() {
  $(this).val((i, v) => Math.max(this.min, Math.min(this.max, v)));
});

или

document.querySelector('input').addEventListener('input', ({ target: t }) => {
  t.value = Math.max(t.min, Math.min(t.max, t.value));
});

$('.price').text((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});

// или

document.querySelectorAll('.price').forEach(n => {
  n.textContent = n.textContent.replace(/\d(?=(\d{3})+\D)/g, '$& ');
});

Ну или (что желательно), перед выводом пропускайте цену через toLocaleString.

Вместо того, чтобы вручную переключать классы каждого блока, сделаем функцию, которая будет принимать блок в качестве параметра и выполнять все необходимые действия:

function toggleClasses(block) {
  const info = block.querySelector('.infoWrapper');
  block.classList.toggle('marginBottom10');
  block.classList.toggle('marginBottom120');
  info.classList.toggle('displayNone');
  info.classList.toggle('displayBlock');
}

Подключение отдельных обработчиков клика к каждой кнопке заменим одним делегированным обработчиком, а вместо ручного перебора всех блоков просто будем искать открытый:

document.addEventListener('click', function(e) {
  const block = e.target.closest('.blockSvg');
  if (block) {
    const prevBlock = document.querySelector('.blockSvg.marginBottom120');
    if (prevBlock && prevBlock !== block) {
      toggleClasses(prevBlock);
    }

    toggleClasses(block);
  }
});

В результате, объём кода сократился на два порядка.

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

В каких элементах и на сколько надо ограничить длину текста:

const className = 'dop_atr';
const maxlen = 250;

Чтобы все элементы обрабатывались индивидуально, вместо строки можно передавать в метод text функцию - вызывается для каждого элемента набора, принимает текущее текстовое содержимое элемента и возвращает новое:

$(`.${className}`).text((i, text) => {
  return text[maxlen] ? `${text.substring(0, maxlen)}...` : text;
});

Или, можно отказаться от jquery:

for (const n of document.getElementsByClassName(className)) {
  n.innerText = n.innerText.slice(0, maxlen) + (n.innerText.charAt(maxlen) && '...');
}

// или

document.querySelectorAll(`.${className}`).forEach(function(n) {
  n.textContent = n.textContent.replace(this, '$1...');
}, RegExp(`(.{${maxlen}}).+`));

document.addEventListener('click', function(e) {
  const el = document.getElementById(e.target.dataset.id);
  if (el) {
    el.checked = !el.checked;
  }
});

или

const buttons = document.querySelectorAll('[data-id]');
const onClick = e => checkboxes[e.target.dataset.id].checked ^= 1;
const checkboxes = Array
  .from(buttons, n => n.dataset.id)
  .reduce((acc, n) => (acc[n] = document.querySelector(`#${n}`), acc), {});

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

$('.tab__list').on('click', '.tab__item', function() {
  const
    $this = $(this),
    { label, ...attrs } = text[$this.data('tab')];

  $this.siblings().removeClass('tab__item--active');
  $this.addClass('tab__item--active');
  $('#formField').attr(attrs);
  $('#formLabel').text(label);
});

Вместо

.red{border:3px solid red;;}
.green{border:3px solid red;;}

пусть будет

.items-list-item-colors label {
  border: 3px solid red;
}

.items-list-item-colors label.active {
  border-color: green;
}

Соответственно, из разметки class="red" вырезаете.

Где, кому и какой класс будем переключать:

const containerSelector = '.items-list-item-colors';
const itemSelector = 'label';
const activeClass = 'active';

Такие есть варианты:

$(containerSelector).change(function() {
  $(itemSelector, this)
    .removeClass(activeClass)
    .has(':checked')
    .addClass(activeClass);
});

// или

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  this.querySelectorAll(itemSelector).forEach(n => {
    n.classList.toggle(activeClass, n.contains(t));
  });
}

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle('active', n === item);
    });
  }
});

Добавляете блок в случае, если его нет:

const $inner = $('.inner');
if (!$inner.find('.butt_back').length) {
  $inner.append(...);
}

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

$('.inner')
  .find('.butt_back').remove()
  .end()
  .append(...);

Что не так ?

Да всё не так.

Что за clone? - у DOM-узлов такого метода нет. Есть cloneNode. Или используйте jquery (судя по тому, что контекст вы пытаетесь получить у clone[0], так и предполагалось), там clone есть: $(canvas).clone().

Копировать содержимое оригинала вы пытаетесь до того, как оно вообще будет загружено. Выполняйте копирование в onload.

Копируете непонятно откуда:

canvas = document.getElementById('myCanvas');
<...>
drawImage(canvas[0],

Опять же - либо canvas = $('#myCanvas'), либо drawImage(canvas,.

UPD. Должно было быть так?

Удаляйте обработчик после того, как он выполнил нужное действие:

$(window).scroll(function onScroll() {
  const $this = $(this);
  if ($this.scrollTop() > scrollToElem) {
    $('#popup-item').addClass('popup-open');
    $this.off('scroll', onScroll);
  }
});

document.addEventListener('mouseover', ({ target: t }) => {
  if (t.classList.contains('pic') && !t.dataset.interval) {
    t.dataset.interval = bgRotate(t);
  }
});

document.addEventListener('mouseout', ({ target: t }) => {
  const { interval } = t.dataset;
  if (interval) {
    clearInterval(interval);
    delete t.dataset.interval;
  }
});

или

document.querySelectorAll('.pic').forEach(n => {
  n.addEventListener('mouseenter', onHover);
  n.addEventListener('mouseleave', onHover);
});

function onHover({ type, target: t }) {
  const d = t.dataset;
  if (type === 'mouseenter' && !d.interval) {
    d.interval = bgRotate(t);
  } else if (type === 'mouseleave') {
    clearInterval(d.interval);
    delete d.interval;
  }
}

.images_box a {
  display: none;
}

.images_box a.active {
  display: inline;
}

const containerSelector = '.items-list-item-wrapper';
const buttonSelector = '.items-list-item-colors input';
const contentSelector = '.images_box a';
const activeClass = 'active';


// jquery, как вы и хотели
$(containerSelector).on('change', buttonSelector, function(e) {
  $(contentSelector, e.delegateTarget)
    .removeClass(activeClass)
    .eq($(buttonSelector, e.delegateTarget).index(this))
    .addClass(activeClass);
}).each((i, n) => $(buttonSelector, n).first().click());

// или, к чёрту jquery
document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
  n.querySelector(buttonSelector).click();
});

function onChange({ target: t }) {
  if (t.matches(buttonSelector)) {
    const buttons = this.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, t);
    this.querySelectorAll(contentSelector).forEach((n, i) => {
      n.classList.toggle(activeClass, i === index);
    });
  }
}