Question

我正在尝试从表中删除一行。当用户单击关闭按钮时，将显示一个模态窗口，要求用户确认他们的选择。如果用户单击否，则没有任何反应。但如果他们单击是，则应从表中删除该行。唯一的问题是：行不会被删除。

我尝试使用其ID删除该行。我有正确的，但我不确定我是否正确删除它。

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

我的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("");

    }); 
});

Answer 1

检查控制台是否有错误

＆＃39;将您的文档保存为html并在firefox或chrome中打开，打开开发工具，其中一个标签是控制台＆＃39;

或在控制台中记录信息，甚至提醒（变量），这样您就可以确定自己拥有所期望的字符串/ ID，

这有用吗？ $（＆＃34; #peter griffin＆＃34;）。remove（）;如果你在控制台中手动执行它？

此外，我从来没有尝试在我的ID中使用空格，也就是它，它拾取#peter然后查找元素格里芬，尝试在ids中没有空格

Answer 2

带空格的ID无效。见jquery IDs with spaces

你仍然可以使用像$("[id='content Module']")之类的选择器让它们工作（尽管HTML无效），但我建议只删除空格

Answer 3

首先，您无法更改多个ID

<tr id= "peter griffin">

要

然后这样做：

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

将删除包含id＆＃39; peter-griffin＆＃39;。

的行

（基本上你的问题是，当你在id中添加一个空格时，它认为你正在输入两个id。）

参考：请记住What are valid values for the id attribute in HTML?，它提醒我们jquery可能有句号或冒号的问题。它还说明ids不能有空格......

JQuery - 无法动态删除带有id的行

3 个答案: