Javascript loop to eliminate elements that do not start with certain value

Question

I have links embedded inside .media-body .media-heading in the HTML example. I'm wanting to write JS to remove any link where the text does not start with the value attribute in the input element, in this case "A"

I've done a manual version below that checks the first A tag and manually removes the other A tag on the click of a button if the text doesn't start with "A". I need this to somehow loop through and do this automatically on page load but not sure how I do that. Any help is appreciated.

<!DOCTYPE html>
<html>
<body>
    <input type="text" name="search" value="A" class="searchbox">
    <div class="media-body">
        <div class="media-heading">
            <a href="#">A doc beginning with A</a>
        </div>
    </div>

    <div class="media-body">
        <div class="media-heading">
            <a href="#">Doc beginning with D</a>
        </div>
    </div>

   <button onclick="startFunction()">Remove wrong doc</button>

   <script>
   function startFunction() {
   var az = document.getElementsByTagName("input")[0].getAttribute("value");
   var getstart = document.getElementsByTagName("a")[0].innerHTML;
   var searchletter = getstart.startsWith(az);
   var myobj = document.getElementsByTagName("a")[1];
   if(searchletter = az)
      {
       myobj.remove();
      }
  }
  </script>
</body>
</html>

Does this answer your question? [What's the best way to loop through a set of elements in JavaScript?](https://stackoverflow.com/questions/157260/whats-the-best-way-to-loop-through-a-set-of-elements-in-javascript) — devlin carnate, Dec 03 '20 at 20:03

obscure · Accepted Answer · 2020-12-04T10:31:53.940

The second part of your question as how to do this automatically on page load is answered rather quickly. Conveniently you already wrapped the functionality inside it's own function - startFunction(). So all you have to do is execute that function after the <body> definition of your html code.

The first part isn't much more difficult as you also almost have anything you need set up yet. The only thing that's missing is looping over the HTMLCollection - more or less an array - retrieved by executing document.getElementsByTagName("a") using a simple for-loop.

There's a catch though: as you loop over the HTMLCollection and eventually remove an object from the DOM using .remove() you're ultimately changing the collection too. In other words, if you remove an object, the list shrinks by one element. To compensate your loop needs to start with the initial number of elements and decrement by one.

Here's an example:

function startFunction() {
  let az = document.getElementsByTagName("input")[0].getAttribute("value");

  let elements = document.getElementsByTagName("a");
  let element;
  for (let a = elements.length - 1; a >= 0; a--) {
    element = elements[a];
    if (!element.innerHTML.startsWith(az)) {
      element.remove();
    }
  }

}

startFunction();

<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
  <div class="media-heading">
    <a href="#">A doc beginning with A</a>
  </div>
</div>

<div class="media-body">
  <div class="media-heading">
    <a href="#">Doc beginning with D</a>
  </div>

  <div class="media-body">
    <div class="media-heading">
      <a href="#">Something completely different</a>
    </div>
  </div>

No problem ultrarun - glad I could help! =) – obscure Dec 04 '20 at 10:32 — obscure, Dec 04 '20 at 10:32

Javascript loop to eliminate elements that do not start with certain value

1 Answers1