Why does the second form disappear after submiting?

Question

There is the piece of code containing 2 forms:

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

The issue is after clicking the delete button the second form dissapears.

Before :

After :

How can I do that the second form doesn't dissapear when clicking the delete button.

UPDATE

DEMO

Answer 1

The problem is right here:

<span id="status"/>

Change this to:

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

The browser thinks, that the span is openend and your second form is a child of it, which got replaced with your text.