关于删除 .error-message 类 这段代码有一些疑问

我贴的是课程的源代码一部分

var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
        submitButton.addEventListener( "click", function( event ) {
            //获取是所有无效的表单元素
            var invalidFields = form.querySelectorAll( ":invalid" ),
                errorMessages = form.querySelectorAll('.error-message'),
                parent;
                console.log(errorMessages)
          
            for ( var i = 0; i < errorMessages.length; i++ ) {
                
                errorMessages[ i ].parentNode.removeChild( errorMessages[ i ] );
               
            }

errorMessages是获取JS动态添加的div，errorMessages[i].parentNode是获取下标为i的errorMessages元素的父级元素，.removeChild(errorMessages[i])，是移除父级元素的下标为i的errorMessages子元素。

如果上面我的是对的话，那么i=1时，那么就是父元素移除的是errorMessages[1]的元素，可是父元素下面只有一个errorMessages的类，所以应该下标为0，为什么也能达到删除作用，请问老师我是哪里理解有偏差呢？