Deleting an element from json array not resetting its length

Question

My issue is very simple. I am trying to delete elements from a json array. I want to know when the last element is deleted in order to hide a div. So I do a check to find if jsonArray.Length > 0. The check is failing. The jsonArray.Length is not getting reset. It always keeps the number of elements added into it even after deleting all elements. For eg: if 4 elements are added to it, then the Length remains as 4.

I will post the code below.

Initializers :

var ccount = 1;
var tasks = []

Inserting element into JSON array :

function insertTask() {
        var out = '<div id="' + ccount + '" ><span style=" width:40px; display: inline-block; vertical-align: top; text-align:left;"><img src="../Images/iconrequestreport1.png" /></span><span style="width:160px; display: inline-block; vertical-align: top; text-align: left; font-family:Arial; font-size:small;"><div>' +
                $('#drpTrajectory').find(":selected").text() + '</div><div>Start Time: ' +
                $('#txtStartTime').val() + '</div><div>End Time: ' +
                $('#txtEndTime').val() + '</div><div>Aggregation: ' +
                $('#drpAggrInterval').find(":selected").text() +
                '</div></span><span style="width:40px; display: inline-block; vertical-align: top;"><input id="btn' + ccount +
                '" class="btnDelete" type="button" onclick="deleteTask(' + ccount + ')"/></span></div> ';
        $('#divTravelTime').append(out);
        var obj = { TaskId: ccount, TrajectoryName: $('#drpTrajectory').find(":selected").text(), StartTime: $('#txtStartTime').val(), EndTime: $('#txtEndTime').val(), Aggregation: $('#drpAggrInterval').find(":selected").text() }
tasks.push(obj)

ccount++;
$('#divTravelTimeHeader').show();
$('#divTravelTime').show();
$('#divJobSubmit').show();

if (tasks.length > 0) {
    $('#divTaskView').show();
}
else {
    $('#divTaskView').hide();
}

Code to delete an item from the JSON array :

function deleteTask(tt) {
    var remID = "#" + tt;
    $(remID).remove();
    delete tasks[tt - 1];
    if (tasks.length > 0) {
        $('#divTaskView').show();
    }
    else {
        $('#divTaskView').hide();
    }
}

See the difference between `delete` and `splice`: http://stackoverflow.com/questions/500606/deleting-array-elements-in-javascript-delete-vs-splice — PatrickSteele, Nov 04 '16 at 12:37
**delete arr[0]** sets the first item to *undefined*. It does not remove the first item from arr — JonSG, Nov 04 '16 at 12:39
Please refer to [http://stackoverflow.com/questions/500606/deleting-array-elements-in-javascript-delete-vs-splice](http://stackoverflow.com/questions/500606/deleting-array-elements-in-javascript-delete-vs-splice). — Tapan Thakkar, Nov 04 '16 at 12:39

score 1 · Answer 1 · answered Nov 04 '16 at 12:41

1

If you use delete over array, it will replace the "deleted" element with undefined, but the index will remain the same.

let arr = [1, 2]
// arr.length is 2
delete arr[1]
// arr = [1, undefined], but the length is still 2

Use splice instead

answered Nov 04 '16 at 12:41

ltamajs

1,231
11
15

Good. Thanks. But it doesn't answer my question exactly. – ViVi Nov 04 '16 at 12:44
replace this line: `delete tasks[tt - 1];` with this `tasks.splice(tt-1 , 1);` – ltamajs Nov 04 '16 at 12:47
1

@ViVi, If you did **arr[1] = undefined;** would you expect the length of **arr** to change? Check out the link by Patrick Steele in your original question for more detail. – JonSG Nov 04 '16 at 12:52

naoufal bardouni · Answer 2 · 2016-11-04T20:12:18.503

0

Try this :

update : Check it now , the splice method removes the rest elements in the array , from the specified index .

function deleteTask(tt) {
    var remID = "#" + tt;
    $(remID).remove();

    //delete tasks[tt - 1];
    tasks.splice(tt-1);

    if (tasks.length > 0) {
        $('#divTaskView').show();
    }
    else {
        $('#divTaskView').hide();
    }
}

Code to delete an item from the JSON array :

function deleteTask(tt) {
    var remID = "#" + tt;
    $(remID).remove();

    //delete tasks[tt - 1];
    tasks = tasks.splice(tt-1 , 1);

    if (tasks.length > 0) {
        $('#divTaskView').show();
    }
    else {
        $('#divTaskView').hide();
    }
}

edited Nov 04 '16 at 20:12

answered Nov 04 '16 at 12:41

naoufal bardouni

241
3
11

`splice` deletes in place, and returns the deleted values. So you **should, in this case, not** write `tasks = tasks.splice()`. – user3297291 Nov 04 '16 at 12:57
Justo to complete the answer. Instead of splice(tt-1, 1), use slice(tt-1) to return the rest of the array. Or use delete myArray[1] – Stelios Voskos Nov 04 '16 at 13:33

Deleting an element from json array not resetting its length

2 Answers2