สอบถามเกี่ยวกับ error ของ js จากโค้ดตัวในการ remove อย่างหน่อยครับ

[wkid]

จากโค้ด การสร้างปุ่ม
ในส่วนของ html

โค้ด: เลือกทั้งหมด

<div class="row">
                    <div class="col-12">
                        <nav aria-label="Page navigation example" style="text-align: center;">

                            <ul class="pagination" id="cat">

                            </ul>
                        </nav>
                    </div>
                </div>

ส่วนของ js เป็นการวนลูบสร้างปุ่ม

โค้ด: เลือกทั้งหมด

for (let index = 1; index <= i; index++) {
        console.log(i);
        if (vv == 0) {
            if (index == 1) {
                document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage(${index - 1})' >Previous</a></li>`
            }

            document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
            if (index == Math.floor(i)) {
                document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage(${index + 1})' >Next</a></li>`
            }
        }




    }

ผมต้องการที่จะเคลียร์ค่าเดิมใน คลาส pagination เพื่อสร้างปุ่มใหม่ละไม่ให้มีตัวเดิมเลยใช้

โค้ด: เลือกทั้งหมด

const boxes = Array.from(document.getElementsByClassName('pagination'));

    boxes.forEach(box => {
        box.remove();
    });

แต่ว่ามันเกิด error เป็น

app.js:337

Error: TypeError: Cannot read properties of null (reading 'innerHTML')
at randerPage (app.js:209:26)
at app.js:330:13

ไม่ทราบว่าต้องแก้ไขยังไงครับ

[wkid]

วิธีแก้ไข

โค้ด: เลือกทั้งหมด

const boxes = Array.from(document.getElementsByClassName('page-item page-link'));

    boxes.forEach(box => {
        box.remove();
    });

สาเหตุเพราะเลือกใช้ คลาสผิดครับ