当从输入中删除所有值以在javascript中自动填充时如何删除所有行？

Question

嗨，

当输入显示所有数据的匹配 id-number 时，自动填充搜索工作正常，但当输入中的 id-number 被删除时，旧数据仍然显示。

在删除输入时如何删除不再匹配 id-number 的行？

const insertNewRecord = (data)=> {

var table = document.getElementById("list").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.id_number;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.first_name;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.last_name;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.email;
cell5 = newRow.insertCell(4);
cell5.innerHTML = data.department;
cell6 = newRow.insertCell(5);
cell6.innerHTML = data.location;
cell7 = newRow.insertCell(6);
cell7.innerHTML = `<button class="editDeleteBtm editBtn" data-id="${data.id_number}" id="editBtn-${data.id_number}">Edit</button>
                   <button class="editDeleteBtm deleteBtn" data-id="${data.id_number}" id="deleteBtn-${data.id_number}">Delete</button>`;


cell1.setAttribute("class", "tableBody");
cell2.setAttribute("class", "tableBody");
cell3.setAttribute("class", "tableBody");
cell4.setAttribute("class", "tableBody");
cell5.setAttribute("class", "tableBody");
cell6.setAttribute("class", "tableBody");
cell7.setAttribute("class", "tableBody");

}

const searchStates = async searchText => {
    const res = await fetch("companydirectory/libs/php/getAll.php")
    const states = await res.json()

    // console.log(states.data)
    let matches = states.data.filter(state => {
        const regex = new RegExp(`^${searchText}`, "gi")

        return state.id.match(regex)
    })

    if (searchText.length === 0) {

        matches = []
        document.getElementById('id_data').deleteRow(0); <-- works but only delete 1st row so how to select all rows?
        
    }

    outputHtml(matches)
}

    const outputHtml = matches => {

        if (matches.length > 0) {
            
            const html = matches.forEach(matched => {
    
                formData["id_number"] = matched.id
                formData["first_name"] = matched.firstName
                formData["last_name"] = matched.lastName
                formData["email"] = matched.email
                formData["department"] = matched.department
                formData["location"] = matched.location
        
                insertNewRecord(formData)
            })

        }
    }


search_id_number.addEventListener("input", ()=> searchStates(search_id_number.value))

Answer 1

• 将 id 放入 tbody 元素

if (searchText.length === 0) {
    matches = []
    var tbody = document.getElementById("myTbodyId");
    tbody.innerHTML = "";      
}

或者

if (searchText.length === 0) {
    matches = []
    var tbody = document.getElementById("myTbodyId");
    while (tbody.hasChildNodes()) {
        tbody.removeChild(tbody.lastChild);
    }
}