javascripttest.html

<div class="image">
  <!--<img src="https://goo.gl/2oZU2S" alt="First">--> 
  First Image
  <button class="remove">X</button>
</div>
<div class="image">
   Second Image
  <button class="remove1" onclick="registerClickHandler(this)">X</button>
</div>

<button id='btn' type="submit" onclick="myFunc('btn')">
  REMOVE THAT!!!
</button>

<div class="image">
  addEventListener
  <button class="remove">X</button>
</div>

<button type="submit" onclick="solutions()">
  Group Array!!!
</button>

<script>

    function formatDate(userDate) {
        // format from M/D/YYYY to YYYYMMDD
        // console.log('userDate', userDate);
        // var d = new Date(userDate);
        // var str = d.getFullYear() + '' + (d.getMonth() + 1) + '' +d.getDate();
        // return str;
    }

    // console.log('changed format');
    // console.log(formatDate("12/31/2014"));

    function registerClickHandler (_this) {
        // Implement the click handler here for button of class 'remove'
        //console.log('event', _this);
        //console.log('event', _this.parentNode);
        _this.parentNode.remove();
        
        //var el = document.getElementById( _this.id ); //assuming '_this' is the 'this' reference not the 'id'
        //el.parentNode.parentNode.removeChild( el.parentNode );

        //var divId = document.getElementById(id);
        //divId.remove();

    }

    function myFunc(id) {
        var divId = document.getElementById(id);
        divId.remove();
    };

    var classname = document.getElementsByClassName("remove");

    var myFunction = function() {
        console.log('parentNode ', this.parentNode);
        this.parentNode.remove();
        //var attribute = this.getAttribute("data-myattribute");
        //alert(attribute);
    };

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', myFunction, false);
    }

    //If you have ES6 support you can replace your last line with:

    // Array.from(classname).forEach(function(element) {
    //   element.addEventListener('click', myFunction);
    // });

    //Note: Older browsers (like IE6, IE7, IE8) don´t support getElementsByClassName and so they return undefined.

    function solutions() {
        var myArray = [
            {phoneNo: "9804544333", totalSec: 300},
            {phoneNo: "9804544333", totalSec: 67},
            {phoneNo: "9804544222", totalSec: 60},
            {phoneNo: "9804544222", totalSec: 120},
            {phoneNo: "9804544111", totalSec: 301},
            {phoneNo: "9804544555", totalSec: 300},
            {phoneNo: "9804544555", totalSec: 67}
        ];

        // var myArray = [
        //     {phoneNo: "9804544333", totalSec: 300},
        //     {phoneNo: "9804544333", totalSec: 67},
        //     {phoneNo: "9804544222", totalSec: 300}
        // ];

        var groups = groupFunc(myArray);
        //console.log('groups ', groups);
        
        var maxSec = maxSecFunc(groups);
        //console.log('maxSec: ', maxSec);

        var minNumber = minNumberFunc(groups, maxSec);
        //console.log('minNumber: ', minNumber);

        var totalCallCost = costCalcualtion(groups, maxSec, minNumber);
        console.log('totalCallCost: ', totalCallCost);
    }

    //Max Cost
    function maxSecFunc(groups) {
        var maxSec = Math.max.apply(Math,groups.map(function(o){return o.totalSec;}));
        return maxSec;
    }

    //Min Number
    function minNumberFunc(groups, maxSec) {
        var maxGroupArr = [];
            groups.forEach(function(element) {
                if(element.totalSec === maxSec){
                    maxGroupArr.push(element);
                }
            });
            if(maxGroupArr.length > 1){
                var minNumber = Math.min.apply(Math,maxGroupArr.map(function(o){return o.phoneNo;}));
            }
            else var minNumber = null;

        return minNumber;
    }

    //Cost Calcualtions
    function costCalcualtion(groups, maxSec, minNumber) {
        var totalCallCost = 0;
        var callCost = 0;
        var mnt = 0;
        //console.log('groups: ', groups);
        groups.forEach(function(element) {
            //console.log('element.totalSec: ', element.totalSec);
            if(parseInt(element.phoneNo) === minNumber && element.totalSec === maxSec && maxSec > 300){
                console.log('1');
                totalCallCost += 0; 
                //console.log('totalCallCost: ', totalCallCost);
            }
            else if(minNumber === null && element.totalSec === maxSec && maxSec > 300){
                console.log('2');
                totalCallCost += 0; 
                //console.log('totalCallCost: ', totalCallCost);
            }
            else if(element.totalSec <= 300){
                console.log('3');
                callCost = element.totalSec * 3; 
                totalCallCost += parseInt(callCost); 
                //console.log('totalCallCost: ', totalCallCost);
            }
            else if(element.totalSec > 300){
                console.log('4');
                mnt = element.totalSec / 60; 
                mnt = parseInt(mnt) + 1;
                callCost = mnt * 150; 
                totalCallCost += parseInt(callCost); 
                //console.log('totalCallCost: ', totalCallCost);
            }
        });

        return totalCallCost;
    }

    //Grouping an Array
    function groupFunc(dataObject) {
        var result = dataObject.reduce(function(res, obj) {
            if (!(obj.phoneNo in res))
                res.__array.push(res[obj.phoneNo] = obj);
            else {
                //res[obj.phoneNo].hits += obj.hits;
                res[obj.phoneNo].totalSec += obj.totalSec;
            }
            return res;
        }, {__array:[]}).__array.sort(function(a,b) { return b.totalSec - a.totalSec; });
        return result;
    };

    
    

</script>