CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
bjurtown
bjurtown

Reputation: 173

JQuery/ Jquery Mobile - best way to remove instance of class from div by toggling

I'm using JQuery mobile framework here, so i've got two 'pages' which in reality both exist in one HTML document. You can navigate between the two via the hamburger menu icon on the top left.

There is an events page. each events has an 'add to favourites' button. when clicked the event populates the favourites page. I'm doing this by cloning the div class.

var add = $('.add-to-fav');

add.on('click', function(){

//change button status
if ($(this).text() == "Add to favourites")
{       
    $(this).text("Remove from favourites");
    $(this).closest(".event-block").clone().appendTo('#fav-list');

} else {

    $(this).text("Add to favourites");
    //get this instance of event block and remove from #fav-list

}

});

My issue comes with trying to remove (or unfavourite) the event by clicking again on the same button. I want this to be achievable from both the events page and the favourites page.

What's the most elegant way to achieve this?

here's a codepen - i've tried to remove as much unrelated code as possible http://codepen.io/MartinBort/pen/EajBXB/

Upvotes: 1

Views: 51

Answers (1)

Omar
Omar

Reputation: 31732

First of all, you are using the same panel for both pages with same ID. Either use an external panel or give each one a unique ID. If you plan to use an external panel, place it outside any page and initialize it manually.

$(function () {
    $("#menu-panel").panel().enhanceWithin();
});

To add listeners, use pagecreate it fires once per page. This way, you can assign different functions for buttons based on containing page. Use event.target to target buttons .add-fav within created page not other ones in DOM.

You can remove "Event" from favourites page from public-events page by retrieving its' header's text since you aren't using IDs' or classes to differentiate between events.

$(document).on("pagecreate", "#public-events", function (event) {
    $('.add-to-fav', event.target).on('click', function () {
        if ($(this).text() == "Add to favourites") {
            $(this).text("Remove from favourites");
            $(this).closest(".event-block").clone().appendTo('#fav-list');
        } else {
            $(this).text("Add to favourites");
            /* retrieve event title */
            var eventTitle = $(this).closest(".event-block").find("h2").text();
            /* loops through event blocks in favourite page */
            $('#favourites #fav-list .event-block h2').each(function () {
                if ($(this).text() == eventTitle) {
                    /* remove matching event */
                    $(this).closest(".event-block").remove();
                }
            });
        }
    });
}).on("pagecreate", "#favourites", function (event) {
    $('.add-to-fav', event.target).on('click', function () {
        $(this).closest(".event-block").remove();
    });
});

Demo

Upvotes: 1

Related Questions