The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Can't delete an element generated with Jquery

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #196222
    John A

    I’m creating a new product filter screen for an eCommerce site in jquery and have come across a problem where I can’t remove an element I have created in Jquery.

    Basically, I want the user to be able to add and then remove filter buttons at the top of the screen. To add a new filter button, click one of the product refinements (like size 16, colour red, etc). This adds the selection, in form of a new anchor element, to the top of the screen (green buttons). I then want to the user to be to able to remove that new anchor element if they click it.

    This is where I am having weird problems. I can successfully remove all the anchor buttons (generated and hard coded) with the ‘clear all’ button I created.

    I can also remove the hard coded anchor (called ‘remove me’) upon clicking it. Yet, exactly the same Jquery script which removes the hard coded ‘click me’ anchor does not remove the new anchor elements generated with Jquery.

    I’ve a made a codepen here:

    And this is the code which does the anchor buttons deletions.

    // On click, remove indvidual filter button
    $(“.filters a”).click(function() {


    Changing the first line to this will solve it :

    $(".filters").on("click", "a", function() {

    Here’s a good clarification (on event delegation) :


    John A

    Sweet, it worked, thanks!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.