I'm having a problem removing an element with jQuery.

Question

I'm trying to remove this element on success function, but it's not doing it!!

jQuery file:

 $(function () {
        //More Button
        $('.more').live("click", function () {
            var ID = $(this).attr("id");
            if (ID) {
                $("#more" + ID).html('<img src="moreajax.gif" />');
                $.ajax({
                    type: "POST",
                    url: "ajax_more.php",
                    data: "lastmsg=" + ID,
                    cache: false,
                    success: function (html) {
                        $("ul.statuses").append(html);
                      // my problem is here
                        $("#more" + ID).remove();
                    }
                });
            }
            else {
                $(".morebox").html('The End');
            }
            return false;
        });
    });

This is the html file: This is the button that's clicked to retrieve more results!

echo'<div id="more'. $dateTime.'" class="morebox">
    <a href="#" class="more" id="'.$dateTime.'">more</a>';

Answer 1

I think id is not getting generated what you are expecting, try to see what it turns out to be with:

alert("#more" + ID);

And make sure it is same as your code:

<a href="#" class="more" id="'.$dateTime.'">more</a>

Answer 2

I think that

$("#more" + ID).remove();

should be

$("#more" + ID).html('');

or else things aren't going to work properly.

Answer 3

If your id has a space in it, that's your problem. The space is valid in an id attribute, but it messes up the CSS selector you're using here (because it's not escaped correctly):

$("#more" + ID).remove();

For instance, with the ID you quoted in a comment on another answer, that will end up being:

$("#more2010-09-20 12:53:43").remove();

...which is an invalid selector (I'm pretty sure; at the very least, it isn't the selector you're looking for).

The easiest thing is probably to ensure that your $dateTime variable's value doesn't have any spaces in it. For good measure, I'd avoid the colons (:) as well, but I'm probably just being paranoid (no, I'm not, see below).

So for instance, you can change your PHP code that outputs these to use str_replace and look something like this (I'm not a PHP guy, apologies if there are minor syntax issues, but you get the gist):

$baseId = str_replace(':', '', str_replace(' ', '_', $dateTime));
echo'<div id="more'. $baseId.'" class="morebox"><a href="#" class="more" id="'.$baseId.'">more</a>';

---

Details on the CSS selectors thing: There are lots of valid id values that you can't use in CSS selectors unless you escape certain characters. Very nearly anything is valid in an id, but the ID you use with a CSS selector has to use a subset of that or be escaped correctly:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".