classList.remove

[1unitedpower]

  arr = document.getElementsByClassName("border_color_red");
  for ( i=0; i<arr.length; i++ ) {
    arr[i].classList.remove("border_color_red");
  }

getElementsByClassName() gibt dir eine "live" HTMLCollection zurück. Das heißt, wenn du die entsprechende Klasse von einem Element löschst, dann ist dieses Element auch sofort nicht mehr Teil der HTMLCollection. Dadurch verringert sich dann auch die Länge der Liste und die Elemente hinter dem gelöschten Element rücken auf. Mit anderen Worten: Deine Schleife zählt falsch. Alternativ könntest du in einer Schleife immer so lange das erste Element löschen bis die Liste letztendlich leer ist:

while (arr.length > 0) {
    arr[0].classList.remove("border_color_red");
}

Oder du könntest die HTMLCollection in ein "richtiges" Array konvertieren:

var elements = [].slice.call(arr);

Mit modernem JavaScript geht das wesentlich kürzer und schöner:

var elements = [...arr];