Удалить разделение по некоторому атрибуту (не ID) в Javascript

Question

Я разрабатываю расширение chrome и пытаюсь удалить некоторые подразделения, используя некоторый атрибут, например:

HTML:

<div someAttr="value1=aaa&value2=bbb">Stack Overflow</div>

Я знаю, что его можно удалить вот так, если я знаю значения value1 и value2:

document.querySelector('[someAttr="value1=aaa&value2=bbb"]').remove();

---

Но для <div>, как показано выше, если я знаю только одно из значений в someAttr и я хочу иметь такой алгоритм: (псевдокод)

var key = 12345;
if (value1 == key || value2 == key) {
    removeThisDiv();
}

Что мне делать (кроме проверки HTML кода в виде строки вручную)?

Answer 1

Зачем использовать ||, вы можете просто проверить значение атрибута с помощью includes():

var el = document.querySelector('div');
var key = 12345;
if (el.getAttribute('someAttr').includes(key)) {
  el.remove();
}

<div someAttr="value1=aaa&value2=12345">Stack Overflow</div>

ИЛИ: Вы можете использовать Селектор атрибутов (содержит: - [attr*=value] ):

var key = 12345;
var el = document.querySelector(`[someAttr*='${key}']`)
if(el) el.remove();

<div someAttr="value1=aaa&value2=12345">Stack Overflow</div>

Answer 2

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

document.querySelector('[someAttr*="12345"]').remove();

если вам нужно передать этот ключ динамически, вы можете сделать

const key = '12345'
const targetElement = document.querySelector(`[someAttr*="${key}"]`);

// Makes sense to check if element exists before attempting to call the remove method.
targetElement && targetElement.remove();

Читать дальше https://www.w3schools.com/cssref/sel_attr_contain.asp

Answer 3

const someAttrDivs = document.querySelectorAll('div[someAttr]');

const key = "12345";

someAttrDivs.forEach(div => {
  const attrArr = div.getAttribute('someAttr').split('=');
  const value1 = attrArr[1].split('&')[0];
  const value2 = attrArr[2];

  if (value1 === key || value2 === key) {
    div.remove();
  }
});

<div someAttr="value1=aaa&value2=bbb">Stack Overflow</div>
<div someAttr="value1=12345&value2=bbb">12345</div>

или вы можете использовать регулярное выражение для получения значений value1 и value2.

const someAttrDivs = document.querySelectorAll('div[someAttr]');

const key = "12345";

someAttrDivs.forEach(div => {
  const attrArr = div.getAttribute('someAttr');
  const value1 = attrArr.match(/value1=([a-z0-9]+)/)[1];
  const value2 = attrArr.match(/value2=([a-z0-9]+)/)[1];

  if (value1 === key || value2 === key) {
    div.remove();
  }
});

<div someAttr="value1=aaa&value2=bbb">Stack Overflow</div>
<div someAttr="value1=12345&value2=bbb">12345</div>