Remove Specific Marker on Leaflet is not A Function

Question

I made a map based on Leaflet and OSM and I created popup for each marker which contains a button to delete the corresponding marker, but it just don't working. I've tried remove features and remove markers functions, with map, layer, and marker properties, but every single one of them returns that it is not a function. Any help appreciated.

Here's my code :

<script type="text/javascript">
    var count = 0; 
    var map, layer, marker = [];

    function selesai(){
        alert(count);
        marker[count].removeMarker();
        location.reload();
        $.ajax({
            url: "{{url('mapdata')}}/"+count,
            data: {},
            dataType: 'json',
            type:'get',
            success:function(data) {
                initMap2(data);
            }
        });
    }

    function initMap(data){
        var locations = data;

        map = L.map( 'osmap_page', {
            center: [locations[locations.length-1][2], locations[locations.length-1][3]],
            zoom: 18
        });

        layer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: ['a','b','c']
        }).addTo( map );

        for ( var i=0; i < locations.length; i++) {

            if (locations[i][0] == 'panic') {
                var icon = L.icon({iconUrl:"{{asset('assets/splash4.gif')}}", iconAnchor: new L.Point(36,41), popupAnchor: new L.Point(-5, -45) });

                marker[i] = L.marker( [locations[i][2], locations[i][3]], {icon: icon});
                marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:red; text-align:center;">Panic</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').addTo( map );

                if(i == locations.length - 1){
                    count = i;
                    map.setView(new L.LatLng(locations[i][2], locations[i][3]), 18);
                    marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:red; text-align:center;">Panic</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').openPopup().addTo( map );
                }

            } else {
                var icon2 = L.icon({iconUrl:"{{asset('assets/opmarkerblue2.png')}}", iconAnchor: new L.Point(0,40), popupAnchor: new L.Point(10, -36)});
                marker[i] = L.marker( [locations[i][2], locations[i][3]], {icon: icon2});

                marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:blue; text-align:center;">Peristiwa</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').addTo( map );

                if(i == locations.length - 1){
                    count = i;
                    map.setView(new L.LatLng(locations[i][2], locations[i][3]), 18);
                    marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:blue; text-align:center;">Peristiwa</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').openPopup().addTo( map );
                }
            }
        }
        $("#start").click(function() {
            timer = setInterval(fetch2, 3000); 
        });

        $("#stop").click(function() {
            if(timer){
                clearInterval(timer);
                timer = null
            }
        });
    }

</script>

Remember, the problem originates from function selesai which contains to remove marker, but it's not a function error. Selesai itself trigerred by clicking Selesai button in marker's popup.

Answer 1

I've already got the answer, after tinkering with possibilities, the answer is simply :

map.removeLayer(marker[count]);

I need to define it as marker[count] to specify which marker I should delete. Cheers.