How to delete specific element nodes based on e.g. an empty attribute value of the provided markup?

Question

How does one delete element nodes in case the provided markup comes for example with empty attribute values like in the example below?

E.g. any image element with a missing src attribute needs to be deleted.

let elements = document.getElementsByTagName('img');
elements.forEach(function(element) {
  console.log(element);
  let src = element.src
  if (!ValidURL(src))
    element.parentNode.removeChild(element);
});

function ValidURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?' + // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|' + // domain name
    '((\d{1,3}\.){3}\d{1,3}))' + // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*' + // port and path
    '(\?[;&a-z\d%_.~+=-]*)?' + // query string
    '(\#[-a-z\d_]*)?$', 'i'); // fragment locater
  if (!pattern.test(str)) {
    alert("Please enter a valid src.");
    return false;
  } else {
    return true;
  }
}

<img id="image-1206-140" alt="" src="" class="ct-image img-proect" href="site.com">
<img id="image-1207-140" alt="" src="" class="ct-image img-proect" href="">
<img id="image-1207-140" alt="" src="" class="ct-image img-proect" href="">

`let elements = document.getElementsByTagName('src');` - there is no element with that tag name in the HTML you have shown us. — CBroe, Nov 09 '22 at 08:46
I'm sorry, I haven't figured out how to edit the questions here yet. This is a typo I tried with img — Poetiq, Nov 09 '22 at 08:51
You can edit your question by pressing the edit button on the bottom left of your question. Do you want to delete it when the regex is not matched or when the attribute is empty? — Mark Baijens, Nov 09 '22 at 08:55
Does this answer your question? [For loop for HTMLCollection elements](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements) — Ivar, Nov 09 '22 at 08:58
Edited, thank you. Yes, I want to completely remove the attribute with the contents of img — Poetiq, Nov 09 '22 at 08:58
Also: [Why do regex constructors need to be double escaped?](https://stackoverflow.com/questions/17863066/why-do-regex-constructors-need-to-be-double-escaped) — Ivar, Nov 09 '22 at 08:59
consider using [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) as starting point for validating urls instead of regexp. — bogdanoff, Nov 09 '22 at 09:07
_"How to delete [...] if [a certain] html attribute is empty"_ ... Start with the correct query method (e.g. [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)) and the correct [selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). Then [`remove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) each queried element node ... `document.querySelectorAll('img[src=""]').forEach(elm => elm.remove());` — Peter Seliger, Nov 09 '22 at 09:09

score 0 · Accepted Answer · answered Nov 09 '22 at 09:28

"How to delete [...] if [a certain] html attribute is empty"

Start with the correct query method (e.g. querySelectorAll) and the correct selector. Then remove each queried element node ... document.querySelectorAll('img[src=""]').forEach(elm => elm.remove());

document
  .querySelectorAll('img[src=""]')
  .forEach(node => node.remove());

li:empty {
  min-height: 1.4em;
}
li:empty::after {
  content: "+++ missing image +++";
}

<ul>
  <li><img src="https://picsum.photos/80/60?grayscale"/></li>
  <li><img src=""/></li>
  <li><img src="https://picsum.photos/60/60?grayscale"/></li>
  <li><img src=""/></li>
  <li><img src="https://picsum.photos/81/61?grayscale"/></li>
  <li><img src=""/></li>
</ul>

How to delete specific element nodes based on e.g. an empty attribute value of the provided markup?

1 Answers1