Js deletes the selected input element, traversing the array from the back to the back and traversing the array from back to front. Why is the result different?

js beginners, want to achieve an effect

check a bunch of input selection boxes. If anyone is selected, click the delete button to delete the selected input
. There are two questions

.

1. Why use foreach to print the checked of each input is true? for is OK? error content (Uncaught TypeError: items.forEach is not a function)

2, for loop, above is traversing from back to front, and the following is traversing from going to backwards . Why select multiple input, but only delete the first selected one when traversing from going to backwards, but when using traversing from back to front , which ones are selected and which ones are all deleted?.

I don"t quite understand the difference. Please tell me which part of the knowledge I am missing, so I can take a look at < del > ~ < / del > ~

.

Code content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1></h1>
    <button onclick="delItem()"></button>
    <form action="">
    <label for=""><input type="checkbox" class="ip1"></label>
    <label for=""><input type="checkbox" class="ip1"></label>
    <label for=""><input type="checkbox" class="ip1"></label>
    <label for=""><input type="checkbox" class="ip1"></label>
    </form>
</div>
<script>

        var items=document.getElementsByClassName("ip1");
        var form=document.getElementsByTagName("form")[0];
        var labels=document.getElementsByTagName("label");
        function delItem() {
            console.log(items);
            items.forEach(function (item,index) {
                console.log(item[index].checked);
            })

            //
            for(var i=items.length-1;i>-1;i--){
            //
            // for(var i=0;i<items.length;iPP){
                if(items[i].checked){
                    console.log(labels[i]);
                    console.log(i);
                    form.removeChild(labels[i]);
                }
            }
        }


</script>

</body>
</html>
Mar.11,2021

first question: items is not an array, it is a class array. There is no forEach method.
second question: after removing one of the items, the items length will change

.
Menu