CODEWITHSUNDEEP
jquery
prasad mestha
prasad mestha

Reputation: 156

parent() doesn't delete rows

I'm writing a jQuery script to add 3 elements into a table. So far, I haven't been able to delete the entire row using the parent() function. Could someone explain what I'm doing wrong?

$(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();
        }

Upvotes: 0

Views: 81

Answers (3)

Jobelle
Jobelle

Reputation: 2834

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

Upvotes: 1

Vegeta
Vegeta

Reputation: 1317

Try this

$(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();
}

Upvotes: 2

Gideon Balaganesan
Gideon Balaganesan

Reputation: 55

replace #btnGenerate click fn. with

$("#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);
    });

replace remove fn. with

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

Upvotes: 0

Related Questions