Question

我是javascript核心的新手，但我想从我的表中删除该行，但是我想在添加新的一行后再将它们删除。然后我尝试使用console.log（），但没有出现任何错误，我该如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practica #1</title>
</head>
<body>
        <form id="frmLibros" onsubmit="return false">
            <div>
                <label for="">Nombre:</label><br>
                <input type="text" id="nombre_libro" name="nombre_libro">
            </div>

            <div>
                <label for="">Autor:</label>
                <input type="text" id="autor" name="autor">
            </div>

            <div>
                <label for="">Genero:</label>
                <select name="genero" id="genero">
                    <option value="Comedia">Comedia</option>
                    <option value="Terror">Terror</option>
                    <option value="Historia">Historia</option>
                </select>
            </div>
            <button id="agregar_libro">Agregar</button>
        </form>
        <table id="myTable">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Autor</th>
                    <th>Genero</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody id="libros"></tbody>
        </table>
</body>
<script type="text/javascript">
    var tablaLibros = document.getElementById("libros");
    var txtLibro = document.getElementById("nombre_libro");
    var txtAutor = document.getElementById("autor");
    var cmbGenero = document.getElementById("genero");
    var btnAgregar = document.getElementById("agregar_libro");
    var libros = [];
    var id = 1;
    var idLibro = 0;

    function editarLibro(){

        var book = this.libro;
        idLibro = book.id;
        txtLibro.value = book.nombre_libro;
        txtAutor.value = book.autor;
        cmbGenero . value = book.genero;
        btnAgregar.textContent = "Modificar";
    }

    function eliminar(){
        document.getElementById('myTable').deleteRow(this.parentNode.parentNode.rowIndex)
    }

    function agregarLibro(){
        var libro = txtLibro.value;
        var autor = txtAutor.value;
        var genero = cmbGenero.value;
        txtLibro.value = "";
        txtAutor.value = "";

        if (idLibro == 0) {
        var item = {
            id: id,
            nombre_libro: libro,
            autor: autor,
            genero: genero
        };
        id++;
        libros.push(item);
    }else{
        for (var i = 0; i < libros.length; i++) {
            if (idLibro == libros[i].id) {
                libros[i].nombre_libro = libro;
                libros[i].autor = autor;
                libros[i].genero = genero;
            }
        }
        idLibro = 0;
        btnAgregar.textContent = "Insertar";
    }
        while (tablaLibros.childElementCount >0){
            tablaLibros.removeChild(tablaLibros.firstChild);
        }

        for (var i = 0; i < libros.length; i++) {

            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');

            tr.appendChild(td);
            td.textContent = libros[i].nombre_libro;
            td.libro = libros[i];
            td.addEventListener('click', editarLibro);

            tr.appendChild(td1);
            td1.textContent = libros[i].autor;
            td1.libro = libros[i];
            td1.addEventListener('click', editarLibro);

            tr.appendChild(td2);
            td2.textContent = libros[i].genero;
            td2.libro = libros[i];
            td2.addEventListener('click', editarLibro);

            var btnEliminar = document.createElement('button');
            btnEliminar.textContent = 'trash';
            btnEliminar.libro = libros[i];
            btnEliminar.addEventListener('click', eliminar);
            tr.appendChild(td3);
            td3.appendChild(btnEliminar);

            tablaLibros.appendChild(tr);
        }
    }
    btnAgregar.addEventListener('click', agregarLibro);
</script>
</html>

Answer 1

您正在删除表格元素，但不删除数组元素。将您的函数消除更改为以下内容：

function eliminar(){
    var row = document.getElementById('myTable');
    libros.splice(libros.indexOf(row), 1);
    row.deleteRow(this.parentNode.parentNode.rowIndex);
}

Plunker：http://plnkr.co/edit/JkprJik58mewwFx3KmO1?p=preview

为什么我删除后会收回我的物品？

1 个答案: