为什么提交后第二种形式会消失？

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按钮时第二种形式不会消失。

更新

DEMO

Answer 1

问题就在这里：

<span id="status"/>

将其更改为：

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

浏览器认为，跨度是开放的，你的第二个表单是它的一个孩子，它被你的文本替换。