JQuery -- unable to dynamically delete row with the id

Question

I am trying to delete a row from a table. When the user clicks the close button, a modal window is displayed asking the user to confirm their choice. If the user clicks no, then nothing happens. But if they click yes, then the row should be deleted from the table. The only problem is: the row does not get deleted.

I try deleting the row by using its ID. I have the right one, but I am not sure if I am removing it correctly.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>iSignout</title>

    <link type="text/css" rel="stylesheet" href="bootstrapCSS.css"/>
     <link href="css/bootstrap.min.css" rel="stylesheet"

  </head>
  <body>

    <div id="left">
            <h3 id=add>Add An Employee</h3>
            <form class="input">
                Name: <input type="text" name="name"><br>
                Phone Number: <input type="tel" name="phone"><br>
                E-Mail: <input type="email" name="email"><br>
                <input type="button" value="Add" id="submit" />
            </form>
        </div>

    <!--Creates the tables with employees -->
    <div id='table'>
        <table class= 'table table-hover'>
            <thead>
                <tr id="title"><th colspan=3>People In the Office</th></tr>
            </thead>

            <tbody>
            <!--Create rows here -->
                <tr>
                    <th>Name</th>
                    <th class>IN/OUT Status</th>
                    <th>Optional Note</th>
                </tr>

                <tr id= "peter griffin">
                    <td>
                        <a href="#openModal">Peter Griffin</a>

                            <div id="openModal" class="modalDialog">
                                <div>
                                    <a href="#close" title="Close" id='modalClose' class="close">X</a>
                                    <h2>Peter Griffin</h2>
                                        <p>Phone:123-456-7890.</p>
                                        <p>email: petergriffin@gmail.com</p>
                                </div>
                            </div>
                    </td>
                    <td> 
                        <input type='radio' name="Peterpresent">In<br>
                        <input type='radio' name="Peterpresent">Out
                    </td>
                    <td>
                        <button type="button" id='del' class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <textarea placeholder="Optional Note about where your are or your schedule"></textarea>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>


    <!-- start: Delete Coupon Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h3 class="modal-title" id="myModalLabel">Warning!</h3>

            </div>
            <div class="modal-body">
                 <h4> Are you sure you want to DELETE?</h4>

            </div>
            <!--/modal-body-collapse -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
            <!--/modal-footer-collapse -->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="bootstrap_script.js"></script>

  </body>
</html>

And my jQuery:

$(document).ready(function( ) {

    //displays the modal window
    $(document).on('click', '#del', function (e) {
        e.preventDefault();
        var id = $(this).parent().parent().attr('id');
        $('#myModal').data('id', id).modal('show');
    });

    //User has clicked 'Yes' -- they want to delete the row
    $(document).on('click', '#btnDelteYes', function () {
        var id = $('#myModal').data('id');
        $('body').append("<p>" + id + "</p>");  //just to test if it gets the right id
        $('#' + id).remove();   //does not remove the row

        $('#myModal').modal('hide');


    });

    //Adds an employee to the table
    $('#submit').click(function(e) {
        e.preventDefault();

        var name = $('input[name=name]').val();
        var phone = $('input[name=phone]').val();
        var email = $('input[name=email]').val();

        //Creates table row
        var tr = "<tr>\
                    <td>\
                        <a href=\"#"+ name+ "openModal\">"+name + " </a>\
                            \
                            <div id=\""+ name + "openModal\" class=\"modalDialog\">\
                                <div>\
                                    <a href=\"#close\" title=\"Close\" class=\"close\">X</a>\
                                    <h2> " + name + "</h2>\
                                        <p>Phone: " + phone + "</p>\
                                        <p>email: " + email + "</p>\
                                </div>\
                            </div>\
                    </td>\
                    <td> \
                        <input type='radio' name=\""+name + "present\">In<br>\
                        <input type='radio' name=\""+name + "present\">Out\
                    </td>\
                    <td>\
                        <button type=\"button\" id='del' class=\"close\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\
                        <textarea placeholder=\"Optional Note about where your are or your schedule\"></textarea>\
                    </td>\
                </tr>;";
        $('table > tbody:last').append(tr); //appends row to table

        $("input[type=text]").val("");
        $("input[type=tel]").val("");
        $("input[type=email]").val("");

    }); 
});

What happens if you try `console.log($('#' + id).html());$('#' + id).remove();` Also, your TR doesn't have an id? What's the ID of the element you're trying to remove. Last thing `$(this).parent().parent().attr('id')` is a brittle way to find a parent, you should use [`jquery.closest(selector)`](http://api.jquery.com/closest/) — Juan Mendes, Jul 08 '14 at 14:36
I am doing this in Notepad++ and I have no idea where the console logs it, so I don't know haha — user3771865, Jul 08 '14 at 14:38
@tomhre That is right, IDs should not have spaces in them. OP, try peter-griffin instead — Juan Mendes, Jul 08 '14 at 14:40
Are you sure, you are getting right control id in "id" variable in 'click' function of 'btnDelteYes' button? — Amit Prajapati, Jul 08 '14 at 14:40
See http://stackoverflow.com/questions/596314/jquery-ids-with-spaces — Juan Mendes, Jul 08 '14 at 14:46
Please go learn how to use the browser console for debugging... https://developer.chrome.com/devtools/docs/javascript-debugging It doesn't matter what you are using to edit your JavaScript — Juan Mendes, Jul 08 '14 at 14:51

score 1 · Accepted Answer · answered Jul 08 '14 at 14:43

check console for errors

'save your document as html and open in firefox or chrome, open dev tools and one of the tabs is console'

or log the information in console, or even alert(variable) so you are absolutely sure you have the string/id you expect,

does this work? $("#peter griffin").remove(); if you manually execute it in console?

Also i never tried having spaces in my IDs perhaps its that, it picks up #peter and then looks for element griffin, try without spaces in ids

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Ids with spaces are not valid. See jquery IDs with spaces

You could still get them to work (despite the invalid HTML) using a selector like $("[id='content Module']") but I would recommend just removing the spaces

edited May 23 '17 at 12:20

Community

1
1

answered Jul 08 '14 at 14:47

Juan Mendes

80,964
26
138
189

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

first, you can't have multiple id's so change

<tr id= "peter griffin">

to

then do this:

$j("tr#peter-griffin").remove();

that will remove the row with id 'peter-griffin'.

(basically your problem is that when you put a space in the id, it thinks you're entering two ids).

Reference: Keep in mind What are valid values for the id attribute in HTML? which reminds us that jquery might have issues with periods or colons. It also states that ids cannot have spaces...

edited May 23 '17 at 11:50

Community

1
1

answered Jul 08 '14 at 15:49

Moe Singh

544
4
9

if you want to delete without id, you can always use a 'find' selector with an 'each(function(key,val){})' and then look for some value e.g. the text in the first tr - if $(this).find("tr").first().text()=="Peter Griffin" then do something... – Moe Singh Jul 08 '14 at 15:52

JQuery -- unable to dynamically delete row with the id

3 Answers3