JQuery Remove() doesn't work

Question

I have a DIV element inside another as follows:

<div id="filters">
    <div class="filterData">hello</div>
</div>

and I'm trying to remove the element:

$("#filters").remove('.filterData');

Problem is, it doesn't. I've tested on other elements on my page and it works. The thing is, I cannot append to it, show or hide it, use .empty. I've also changed it to be a DIV with 'filterData' as the ID and told JQuery to remove it but it refuses to...

Has anyone had a stuborn element like this before?

EDIT: I'm also trying to remove it inside a $(document).ready function so I have no idea.

Answer 1

That is not how .remove() works

Use

$("#filters .filterData").remove();

---

If you use a selector as a parameter to remove it acts as a filter on the existing set, not as find..

So you could use $("#filters .filterData").remove(':first'); if you had many .filerData and wanted to remove the first.. (just an example)

Answer 2

Gaby is correct, you need to just use .remove() and not .remove('.filterData'). Or if you still want to keep your div, but just take out everything in there, you can use .empty()

$(".filterData").empty();