无法删除带有索引的表内的 tr 元素

Question

我正在尝试创建一个表，在其中输入对象中的元素。可以在页面上呈现的元素数量有限。因此，为了查看更多内容，您将单击下一个/上一个，以查看其他“页面”。

问题是，我想删除不显示的索引。

底部的逻辑是我设置最小和最大索引并查看不同的页面，我会将这些数字增加 10（以在页面上获得 10 个结果），但是当我单击下一步按钮时，我想删除 0 - 10 和只有 10 - 20 个，但 table.deleteRow(index) 不执行任何操作。（但 table.deteteRow(1) 确实有效）

function fill(){

        prices.forEach((element,index) =>{

            const table = document.querySelector("table");

            const tr = document.createElement("tr");

            tableItems.appendChild(tr);

            

           

            if(index >= min && index < max){

                

                const type = document.createElement("td");

                const name = document.createElement("td");

                const hours = document.createElement("td");

                const photos = document.createElement("td");

                const place = document.createElement("td");

                const price = document.createElement("td");

                type.innerHTML = element.type;

                name.innerHTML = element.name;

                hours.innerHTML = element.hours;

                photos.innerHTML = element.photos;

                place.innerHTML = element.place;

                price.innerHTML = element.price;

                tr.appendChild(type);

                tr.appendChild(name);

                tr.appendChild(hours);

                tr.appendChild(photos);

                tr.appendChild(place);

                tr.appendChild(price);

            }

            if(index > max){

                table.deleteRow(index);

            }

    

            //

        });

    }

    buttonRight.addEventListener("click",()=>{

        min = max;

        max = max + 10;

        fill();

    });

    buttonLeft.addEventListener("click",()=>{

        max = min;

        min = min -10;

        fill();

    });

Answer 1

您始终应该删除索引为 0-9 的行，并且不应该更改索引号，因为表中始终有 10 行。似乎当您单击“下一步”按钮时，简单的方法是在调用填充函数之前从表中删除所有 tr 。