AppendTo and then possible deleting of that element

Question

I have some elements can I'm moving into another div (from x to y). The problem is that the the elements in x are deletable but the new copied element is not.

Here is the first state

Here the state after deleting Filter 1

Here the state after adding the Name person above... but I can't delete it like the others elements!

I already checked the classes css and they seem okay. Here my code.

JS

function AddFilters() 
{

    if ( $(".filter-edited").css('display') == 'none' )
    {
        $("#btn_add").html("Hide Filters");
        // element is hidden
        $(".filter-edited").fadeIn();
    }

    else if ( $(".filter-edited").css('display') != 'none' )
    {
        $("#btn_add").html("Add Filter");
        // element is hidden
        $(".filter-edited").hide();
    }

}



$(document).ready(function() {
    $('.removable').on('click', function() {
        $(this).parent().remove();
    });
});

$(document).ready(function() {
    $('.addable').on('click', function() {
        $(this).parent().appendTo(".filter-added");

        $(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');

    });
});

HTML

<script src="../assets/own_js/addfilters.js"></script>

<div class="row add-filters">
    <div class="col-md-12">
        <div class="row ">
            <div class="col-sm-10 filter-added">


                <span> Filtered on: </span>
                <a class="btn btn-default">
                    <span class="text">Filter 1</span>
                    <span class="glyphicon glyphicon-remove pull-right removable" ></span>
                </a>
                <a class="btn btn-default">
                    <span class="text">Filter 2</span>
                    <span class="glyphicon glyphicon-remove pull-right removable"></span>
                </a>
                <a class="btn btn-default">
                    <span class="text">Filter 3</span>
                    <span class="glyphicon glyphicon-remove pull-right removable" ></span>
                </a>


            </div>
            <div class="col-sm-2 pull-right">
                    <a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
            </div>
        </div>

        <div class="row filter-edited" style="display:none;">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-10 filters">
                        <a class="btn btn-default">
                            <span class="text">Business</span>
                            <span class="glyphicon glyphicon-plus pull-right addable"></span>
                        </a>
                        <a class="btn btn-default">
                            <span class="text">Campaign</span>
                            <span class="glyphicon glyphicon-plus pull-right addable"></span>
                        </a>
                        <a class="btn btn-default">
                            <span class"text">Event</span>
                            <span class="glyphicon glyphicon-plus pull-right addable"></span>
                        </a>
                        <a class="btn btn-default">
                            <span class"text">Channel</span>
                            <span class="glyphicon glyphicon-plus pull-right addable"></span>
                        </a>
                        <a class="btn btn-default">
                            <span class"text">Name person</span>
                            <span class="glyphicon glyphicon-plus pull-right addable"></span>
                        </a>

                    </div>
                    <div class="col-md-2">

                    </div>
                </div>
                <div class="row">

                </div>
            </div>
        </div>
    </div>

</div>

SASS CSS

 .add-filters
 {
    .filter-added 
    {
        span 
        {
            margin-right: 5px;
        }

        span.glyphicon.glyphicon-remove 
        {
            margin-left: 8px;
            color: red;
            &:hover
            {
                cursor: pointer;
                color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
            }

        }

        a.btn.btn-default 
        {
            min-width:100px;
            padding: 3px 0px 0px 0px;

            margin-left: 10px;

            //delete the margin between the buttons on small devices
            @media (max-width: 768px) {

                margin-left: 0px;

            }
            &:first-of-type
            {

                margin-left: 0px;
            }

            &:hover
            {
                cursor:default;
                background-color: #fff;
                border-color: #ccc;
            }

        }

    }
    .filter-edited 
    {
        margin-top: 20px;
        /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -webkit-border-radius: 7px; 

        /* Firefox 1-3.6 */
        -moz-border-radius: 7px; 

        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 7px; 
        border: 1px solid #ddd;


        span.glyphicon.glyphicon-plus
        {
            margin-left: 4px;
            color: #15925f;

        }

        a.btn.btn-default 
        {
            min-width:150px;
            padding: 10px 5px 10px 0px;

            margin-left: 5px;

            //delete the margin between the buttons on small devices
            @media (max-width: 768px) {

                margin-left: 0px;
                margin-top: 2px;

            }
            &:first-of-type
            {

                margin-left: 0px;
            }
        }

        .filters {
            padding: 15px;

        }
    }
 }

What is the problem ? You need to delete "addable" elements or you need to NOT delete it? Your question is vague and it's difficult to understand what you need — Marcos Pérez Gude, Sep 22 '15 at 13:46
The $('.addable').on('click', function()... Should be $('#SomeParentThatExistFromBeginning').on('click', '.addable', function()... Look at 'on' jquery function webpage.. (And search for 'future' keyword' — ItayB, Sep 22 '15 at 13:48

Almir Sarajčić · Answer 1 · 2015-09-22T13:54:31.973

1

You are listening only for events on currently shown elements. You need to call .on() function on parent element and pass child selector as a second parameter.

$(document).ready(function() {
    $('.filter-added').on('click', '.removable', function() {
        $(this).parent().remove();
    });
});

edited Sep 22 '15 at 13:54

answered Sep 22 '15 at 13:47

Almir Sarajčić

1,520
3
16
19

3

do not suggest solution with live. it is deprecated in version 1.7+ – Milind Anantwar Sep 22 '15 at 13:48

score 0 · Accepted Answer · answered Sep 22 '15 at 13:55

  $('.removable').on('click', function() {
      $(this).parent().remove();
  });

Should Be:

  $(document).on('click', '.removable', function() {
      $(this).parent().remove();
  });

The reason behind this being, is that you are only applying this event to the current elements on the page. The markup below applies it to all elements of '.removable' that exist on the document. Current and future.

You could also run a .bind() on the object after it is created, and bind an event to it, but that would take more code and be less efficient.

AppendTo and then possible deleting of that element

2 Answers2