Question

我正在编写一个jQuery脚本，将3个元素添加到表中。到目前为止，我还无法使用parent（）函数删除整行。有人可以解释我做错了吗？

$(function(){
    $("#dvTable").hide();   
    $("#btnGenerate").click(function(){
        var ename = $("#ename").val();
        var eid = $("#eid").val();
        var desc = $("#desc").val();
        var dvTable= $("#display");
        $("#formContainer").hide();
        $("#dvTable").show();
        var content = dvTable.children();    
        content.append('<tr>')
            .append('<td>' + ename + '</td>')
            .append('<td>' + eid + '</td>')
            .append('<td>' + desc + '</td>')
            .append('<td onclick="edit()">edit</td>')
            .append('<td onclick="remove()">del</td>')
            .append('</tr>');
        });

        $("#addEntry").click(function(){
            $("#ename").val("");
            $("#eid").val("");
            $("#desc").val("");
            $("#formContainer").show();
            $("#dvTable").hide();
        }); 
    });

    function edit(){
        }
    function remove(){
            $(this).parent().remove();
        }

Answer 1

试试这个

$(document).ready(function(){
    $("#dvTable").hide();   
    $("#btnGenerate").click(function(){
        var ename = $("#ename").val();
        var eid = $("#eid").val();
        var desc = $("#desc").val();
        var dvTable= $("#display");
        $("#formContainer").hide();
        $("#dvTable").show();
        var content = dvTable.children();    
        content.append('<tr>')
            .append('<td>' + ename + '</td>')
            .append('<td>' + eid + '</td>')
            .append('<td>' + desc + '</td>')
            .append('<td onclick="edit()">edit</td>')
            .append('<td onclick="remove(event)">del</td>')
            .append('</tr>');
        });
    });

    $("#addEntry").click(function(){
        $("#ename").val("");
        $("#eid").val("");
        $("#desc").val("");
        $("#formContainer").show();
        $("#dvTable").hide();
    }); 

});

function remove(event){
    $(event.target).closest('tr').remove();
}

Answer 2

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function(){
        //$("#dvTable").hide();
        $("#btnGenerate").click(function () {
            var ename = $("#ename").val();
            var eid = $("#eid").val();
            var desc = $("#desc").val();

            szTr = "<tr><td>";
            szTr = szTr + ename + "</td>";
            szTr = szTr + "<td>" + eid + "</td>";
            szTr = szTr + "<td>" + desc  + "</td>";
            szTr = szTr + '<td onclick="edit(this)">edit</td>';
            szTr = szTr + "'<td class='delete'>del</td>'";
            szTr = szTr + "</tr>";
            $('#display tbody').append(szTr);

        });


        $('#display').on('click', '.delete', function () {
            $(this).parents('tr').remove();
        });

    });



</script>
</head>
<body>

    Name:<input type="text" id="ename" value="Name"/><br />
    Id: <input type="text" id="eid" value="new_id"/><br />
    Des <input type="text" id="desc" value="description"/><br />
     <input type="button" value="Generate" id="btnGenerate">

    <div id="dvTable">
    <table id="display">
        <tbody></tbody>
    </table>
    </div>
</body>
</html>

Answer 3

替换#btnGenerate点击fn。与

$("#btnGenerate").click(function(){
    var ename = $("#ename").val();
    var eid = $("#eid").val();
    var desc = $("#desc").val();
    var dvTable= $("#display");
    $("#formContainer").hide();
    $("#dvTable").show();
    var content = dvTable.children(); 
    var text = '<tr>';
        text += '<td>' + ename + '</td>';
        text += '<td>' + eid + '</td>';
        text += '<td>' + desc + '</td>';
        text += '<td onclick="edit()">edit</td>';
        text += '<td onclick="remove(event)">del</td>';
        text += '</tr>';
    content.append(text);
    });

替换删除fn。与

function remove(event){
   $(event.target).parent().remove();
}

parent（）不会删除行

3 个答案: