using array.splice with for loop dose not delete all the array elements

Question

    let arr = [10,20,30];
    
        for(let i = 0 ; i<arr.length;i++){
            arr.splice(i,1);
                console.log(`i = ${i}   and arr indexs  are ${arr.indexOf(arr[i])}`);
        }
    
            console.log(arr);

the output is :
i = 0   and arr indexs  are 0
i = 1   and arr indexs  are -1
[20]
and I want the output to be like:
i = 0   and arr indexes  are 0
i = 1   and arr indexes  are 1
[]

the splice function does not delete all elements of the array and I want all the elements to be deleted