removing function on click jquery

Question

I have gone through quite a few similar question but none of them fit to my problem.

I am calling a function after onclick event to my anchor tag and after clicking the anchor tag the function adds a row new row to another section within the webpage.

What I am trying to do is to revert the process back when a user clicks on the same anchor tag again. In other words the newly added row should be removed from the view if clicked again.

Here is my code where on click I am calling a function to add new rows

function drawSelections(betTypeId, tableId, selections) {
    var whiteLegendTrId = tableId + '_whiteLegendTr';

    $.each(selections, function(i, v){

        var selectionRowId = tableId + '_' + v.id;

        document.getElementById(tableId).appendChild(createTr(selectionRowId,null,"white"));

        $('#' + whiteLegendTrId).find('td').each(function() {
            var tdId = $(this).attr('id');
            if (tdId == "pic") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, "",null))}
            else if (tdId == "no") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.position,null))}
            else if (tdId == "horseName" || tdId == "jockey") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.name,null))}

            // Horse prices
            else {
                var priceNotFound = true;
                $.each(v.prices, function(index,value) {
                    if (value.betTypeId == betTypeId && (value.productId == tdId || value.betTypeId == tdId)) {
                        priceNotFound = false;

                        var td = createTd(null, null, null, "", null),
                            a = document.createElement('a');
                        a.innerHTML = value.value.toFixed(2);

                        // adding new rows after onclick to anchore tag
                        (function(i, index){
                            a.onclick=function() {
                                var betInfo = createMapForBet(selections[i],index);
                                $(this).toggleClass("highlight");
                                increaseBetSlipCount();
                                addToSingleBetSlip(betInfo);
                            }
                        })(i,index)

                        td.appendChild(a);
                        document.getElementById(selectionRowId).appendChild(td);
                    }
                });
                if (priceNotFound) document.getElementById(selectionRowId).appendChild(createTd(null, null, null, '-',null));
            };
        });
    });
}

Adding new rows

function addToSingleBetSlip(betInfo) {
    // Show bet slip
    $('.betslip_details.gray').show();
    // Make Single tab active
    selectSingleBetSlip();

    // Create div for the bet
    var div = createSingleBetDiv(betInfo);
    $("#bets").append(div);

    // Increase single bet counter
    updateBetSinglesCounter();

}

This is the JS code where I am generating the views for the dynamic rows added after clicking the anchor tag in my first function

function createSingleBetDiv(betInfo) {
    var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

    // Info abt the bet
    $(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');
    var raceInfo = "";
    $("#raceInfo").contents().filter(function () {
        if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
    });
    $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');

    // Creating WIN / PLACE checkbox selection
    $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

    // Append left part
    $(div).append(leftDiv);
    // Append right part
    $(div).append(a);
    // Appending div with data
    $.data(div, 'mapForBet', betInfo);

    return div;
}

Function to delete the individual rows

function removeSingleBet(id) {

    // Remove the div
    removeElement(id);

    // Decrease the betslip counter
    decreaseBetSlipCount();

    // Decrease bet singles counter
    updateBetSinglesCounter();
}

function removeElement(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

Answer 1

It's not the most elegant solution, but it should get you started.

I tried keeping it in the same format as your code where applicable:

http://jsfiddle.net/L5wmz/

ul{
    min-height: 100px;
    width: 250px; 
    border: 1px solid lightGrey;
}

<ul id="bets">
    <li id="bet_one">one</li>
    <li id="bet_two">two</li>
</ul>

$(document).ready(function(){
    var bets   =    $("#bets li");
    var slips  =    $("#slips");

    bets.bind("click", function(){
        var that = $(this);

        try{
            that.data("slipData");
        }catch(err){
            that.data("slipData",null);
        }

        if(that.data("slipData") == null){
            var slip = createSlip({slipdata:"data"+that.attr("id")});
            slip.bind("click", function(){
                that.data("slipData",null);
                $(this).remove()
            });
            that.data("slipData",slip);
            slips.append(slip);
        }
        else{
            slips.find(that.data("slipData")).remove();
            that.data("slipData",null);
        }
        console.log(that.data("slipData"));
    });
});

function createSlip(data){
    var item = $(document.createElement("li")).append("slip: "+data.slipdata);
    return item;
}