Seanyr

Есть такая интересная штука, как mix-blend-mode
Использовать можно например так:

Поддержка неплохая, только IE в пролете

Простенькая демонстрация того что я в комментариях написал

Средствами css убрать из дом нельзя.
Можно скрыть из потока, но все связанные с этим свойства не анимируются.
А можно, например, сделать чтобы он не занимал места в потоке или придумать еще какие-нибудь костыли:

let filtered = arrWithObj.filter(x => !arr.includes(x.id));

Но если важна совместимость с IE ниже 9 версии, то лучше перебором

Вот, допилил ваш вариант, чтобы работал:

let dataArray = [];
let someData = document.getElementById('fieldForData');

let ul = document.createElement('ul');
document.body.appendChild(ul);

let actionButton = document.querySelector('button');
actionButton.addEventListener('click', function() {
    let data = someData.value.toUpperCase();
    //если значение пустое или есть в массиве, то ничего не делаем
    if (!data || dataArray.indexOf( data ) != -1) return;
    dataArray.push(data);
    let li = document.createElement('li');
    li.textContent = data;
    ul.appendChild(li);
});

Находим индекс последней точки, берем из строки всё начиная с него

function getLastPart (str) {
  let index = str.lastIndexOf('.');
  return str.slice(index);
}

Если вкратце, то советую использовать jquery, если важна совместимость, или можно делать дополнительные обработки под ie, типа такой:

if (img.addEventListener) {
  image.addEventListener('load', someFunc);
} else {
  // для IE
  img.attachEvent('onload', someFunc);
}

А на счет кэша, вот здесь почитай. Там всё довольно просто, но сейчас времени нет расписывать. Может позже дополню

Если я правильно понял вопрос, то надо добавить контейнеру overflow: hidden.
Это скроет всё что выходит за пределы контейнера