为什么第二份表格在提交后消失了？

Question

有一段代码包含两种形式：

<form class="emp-delete">
    <label for="emp-id">Id:</label>
    <input type="text" id="emp-id" />
    <input type="submit" id="submit" value="delete" />
    <span id="status" />
</form>
<script type="text/javascript">
    $("#submit").click(function(){
            $.ajax({
            type: "DELETE",
            url: "/corporate/employees/" + $("#emp-id").val(),
            complete: function(r){
                    $("#status").text(r.responseText);
                }
            })
            return false;
        })
</script>
<p><spring:message code="createEmployee.title"/>
<form class="emp-create">
    <label for="name" />
    <input type="text" id="name" value="create"/>
    <input type="submit" id="add-emp" />
</form>
<script type="text/javascript">
    $("#add-emp").click(function(){
        var employeeObject= { name: $("#name").val() }
        $.ajax({
            type: "POST",
            data: JSON.stringify(employeeObject),
            contentType: "application/json",
            url: "/corporate/employees"
        })
        return false;
    })
</script>

问题是单击delete按钮后，第二个表单消失了。

之前 ：

之后 ：

单击delete按钮时，第二种形式不消失。

更新

演示

Answer 1

问题就在这里：

<span id="status"/>

更改为：

<span id="status"></span>

浏览器认为该范围是openend，而您的第二个表单是它的子级，已被您的文本替换。