The following code always returns the same output.

var array = ['v1', 'v2', 'v3', 'v4'];

console.log(array.filter(doThis));

function doThis(item) {
  var element;
  var variable;
  if (item === 'thisString' || item === 'thatString') {
    return false;
  } else {
    element = document.getElementById(item);
    if (element.children > 0) {
      variable = value;
    }
    if (element.children.length < 2) {
      if (element.children.length === 0) {
        return true;
      } else {
        if (valueA && variable > 15) {
          element.removeChild(element.children[0]);
          document.getElementById('container-a').appendChild(element.children[0]);
        } else if (valueB && variable < 16) {
          element.removeChild(element.children[0]);
          document.getElementById('container-b').appendChild(element.children[0]);
        }
        return true;
      }
    } else {
      if (valueA && variable > 15) {
        return false;
      } else if (valueB && variable < 16) {
        return false;
      } else {
        return true;
      }
    }
  }
}

Below is the actual code as per requested...

var x = targetPointsArray.filter(testTargetPointsValidity);
console.log(x);

function testTargetPointsValidity(item) {
  var pointElement;
  var childCheckerValue;
  if (item === 'point-00-RA' || item === 'point-RA-00') {
    return false; // unless racking
  } else {
    pointElement = document.getElementById(item);
    if (pointElement.children > 0) {
      childCheckerValue = Number(pointElement.children[0].id.substring(8,10));
    }
    if (pointElement.children.length < 2) {
      if (pointElement.children.length === 0) {
        return true;
        //validatePoint(pointElement);
      } else {
        if (p1.isActing && childCheckerValue > 15) {
          pointElement.removeChild(pointElement.children[0]);
          document.getElementById('point-BA-25').appendChild(pointElement.children[0]);
        } else if (p2.isActing && childCheckerValue < 16) {
          pointElement.removeChild(pointElement.children[0]);
          document.getElementById('point-25-BA').appendChild(pointElement.children[0]);
        }
        return true;
        //validatePoint(pointElement);
      }
    } else {
      if (p1.isActing && childCheckerValue > 15) {
        return false;
      } else if (p2.isActing && childCheckerValue < 16) {
        return false;
      } else {
        return true;
        //validatePoint(pointElement);
      }
    }
  }
}

Why does the following code always return the same output (['v1', 'v2', 'v3', 'v4']), even when the function evaluates to return false? What am I misunderstanding here?

I have tried using different return values to no avail. I have tried commenting out return false (i.e. // return false;). I have been looking through various other stackoverflow questions, none of which seem to address this issue.

As ChrisG pointed out, the issue was that I simply forgot some code: element.children > 0 should of course be element.children.length > 0.

The filter function creates another array based on the array passed to it, it does not change it, so you should try :

console.log(array);
var newArray = array.filter(doThis);
console.log(array);  // => still the same
console.log(newArray);  // => filtered

And to override, use : array = array.filter(doThis);
Example :

var array = [1,3,46,-8,45,45,45,19,15,23,194,555];
array = array.filter(function(a){return a>40});
console.log(array);

more