Javascript 为什么一旦我删除了我的项目，我就要取回它们？_Javascript_Html

Javascript 为什么一旦我删除了我的项目，我就要取回它们？

javascript html

Javascript 为什么一旦我删除了我的项目，我就要取回它们？,javascript,html,Javascript,Html,我是javascript核心的新手，但我想从表中删除该行，但我想在添加一个新行后再次删除它们。然后我尝试使用console.log（），但似乎没有什么问题。如何修复它 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practica #1</title> </head> <body>

我是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>


实践1
名称：

自动：
慷慨：
传通媒体
恐怖
历史
阿格雷戈
名义
自动
慷慨的
var tablaLibros=document.getElementById（“libros”）；
var txtLibro=document.getElementById（“nombre_libro”）；
var txtAutor=document.getElementById（“autor”）；
var cmbrando=document.getElementById（“慷慨”）；
var btnAgregar=document.getElementById（“agregar_libro”）；
var libros=[]；
var-id=1；
var-idLibro=0；
函数editarLibro（）{
var book=this.libro；
idLibro=book.id；
txtLibro.value=book.nombre_libro；
txtAutor.value=book.autor；
cmbrando.value=book.grando；
btnAgregar.textContent=“Modificar”；
}
函数eliminar（）{
document.getElementById（'myTable'）.deleteRow（this.parentNode.parentNode.rowIndex）
}
函数agregarLibro（）{
var libro=txtLibro.value；
var autor=txtAutor.value；
var慷慨=CMBRONG.value；
txtLibro.value=“”；
txtAutor.value=“”；
if（idLibro==0）{
变量项={
id:id，
化名：libro，
自动：自动，
慷慨的
};
id++；
libros.push（项目）；
}否则{
对于（var i=0；i0）{
tablaLibros.removeChild（tablaLibros.firstChild）；
}
对于（var i=0；i

您删除的是表格元素，而不是数组元素。将函数eliminar更改为以下内容：

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

Plunker:

我想在添加一个新的后再次删除它们-你能试着重写这句话吗，毫无意义