Delete a concrete element with jQuery

I think that's a very simple question, but I can't deal with it: I have an unordered list in my jsp with some list items like these:

<li>
    <p class="text">Some text.</p>
    <table class="answer-details" style="width: 100%">
    <tbody>
        <tr class="tr">
            <td style="width: 50%;">
                <div class="msg-modification" display="inline" align="right">
                    <a id="modify" class="delete-answer" href="#">Delete</a>
                </div>
            </td>
            <td style="width: 50%; vertical-align: bottom;">
                <img src="...">
                <a class="answer-author" href="..." target="_blank">User name</a>
                <div class="answer-info">29/06/2011</div>
            </td>
       开发者_StackOverflow </tr>                               
    </tbody>
</table>

As you can see, every list item has a link to delete the message/answer. What I'm trying to do is, using jQuery, show an information message into the same li when I click the link, and delete all the content into the list item except that message.

Here's my jQuery code:

$('.esborrar-resposta').click(function(event) {
    event.preventDefault();

    $(this).closest('.li').children('p').remove(); // it doesn't work
    $(this).closest('.tr').before('<tr><td><div class="output">Information message</div></td></tr>');
    $(this).closest('.tr').remove();
});

The above code deletes all except the paragraph tag. This is my resulting HTML code:

<li>
    <p>Some text.</p>
    <table class="answer-details" style="width: 100%">
            <tbody>
                    <tr><td><div class="output">Information message</div></td></tr>                             
            </tbody>
    </table>
</li>

I want to delete this paragraph tag, but I tried these options with no luck:

$(this).closest('.li').children('p').remove();

and

$(this).closest('.text').remove()

(Maybe it doesn't work because the paragraph tag is not a parent of link tag)

Can someone help me to delete it?

---

Simple:

$(this).closest('.li').children('p').remove();

Searches for an element with class li, not a <li> element. Replace with:

$(this).closest('li').children('p').remove();`

---

$(this).closest('.text').remove()

Will not work, since .closest() does the following:

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree. (my emphasis)

The p.text element is not an ancestor, but a sibling to an ancestor. Thus, the following might have worked:

$(this).closest('li').find('.text').remove();

---

try

$("li")

instead of

$(".li")


$(this).closest('li').children('p').remove();

because .li (that leading dot) means you'Re searching for class="li", not<li> itself

---

li is not a class $(this).closest('.li').children('p').remove();

use $(this).closest('li').children('p').remove();