How can I remove an object in JavaScript?

Question

There is an array like this:

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]

I am trying to delete the whole objects Where the GraderId is some value (:

$(function() {
            $("#schoolGraders").on("dblclick",
                function() {
                    $.each(array,function(i,r){
                        if (r.GraderId == $(this).val()) {
                            r.removeItem;
                       }
                });
        });

the code above does not work.

Here is the HTML Code:

<select class="form-control" id="schoolGraders" style="width: 80%; height: 200px" 
multiple></select>

I generate the options like this:

item = "";
                $.ajax({
                    type: "GET",
                    url: "address" + $(this).val(),
                    contentType: "application/json",
                    dataType: "json"
                }).done(function (res) {
                    var iteem = "";
                    $.each(res,
                        function (i, r) {
                            iteem += '<option value="' + r.id + 
                             '">' + r.title + '</option>';
                        });
                    $("#graderSchools").html(iteem);
                });

Is there any condition in JavaScript So I can remove objects WHERE the GraderId is some value ?

Why are we using jQuery? less is more. jQuery made sense five years ago. Not so much now. — zipzit
– zipzit, Commented Sep 6, 2021 at 6:11
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Pakira
– Pakira, Commented Sep 6, 2021 at 6:13
Rather than using an array, consider using a Set. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Brad
– Brad, Commented Sep 6, 2021 at 6:19
Does this answer your question? How can I remove a specific item from an array? — Peter B
– Peter B, Commented Sep 6, 2021 at 6:28
@M.imp The accepted answer with 14000+ upvotes says "Find the index of the array element you want to remove [....] then remove that index with splice". This totally applies, esp. when combined with the other answers that show how to find the index without using indexOf. — Peter B
– Peter B, Commented Sep 6, 2021 at 8:28

ahsan · Accepted Answer · 2021-09-06 06:11:44Z

2

Something like this perhaps, lets say you want to remove object where GraderId is 876.

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"},
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"},
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]
            
array.forEach((item, index) => {
    if(item.GraderId === 876){
    delete array[index]
  }
})

console.log(array)

answered Sep 6, 2021 at 6:11

ahsan

1,50411 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

M.imp Over a year ago

didn't work: $(function() { $("#schoolGraders").on("dblclick", function () { var deletedGraderId = $(this).val(); $("#schoolGraders option[value=" + $(this).val() + "]").remove(); array.forEach((item, index) => { alert("hi"); if (item.GraderId === deletedGraderId) { delete array[index]; } }); }); });

DragonInTraining Over a year ago

Doesnt the delete in JS only set the element to undefined?

Jose Rui Santos Over a year ago

@DragonInTraining No. Delete removes a property from an object. Run this in console let name = {family: "Tosh", first: "Peter"}; delete name.first; name;

Peter B Over a year ago

DragonInTraining is right, this does exactly the same as array[index] = undefined; and also array.length does not change.

Jose Rui Santos Over a year ago

Oh yes, in case of arrays, you are right. Delete does not remove the item, it sets it to undefined. To remove the item, use splice

Dharmaraj · Accepted Answer · 2021-09-06 06:25:24Z

1

You can use filter():

var array = [
  {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
  {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
  {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
  {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
  {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
  {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
  {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
  {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
]

const filteredArr = array.filter(item => item.GraderId !== $(this).val())

Then maps items to HTML using this filteredArray

edited Sep 6, 2021 at 6:25

answered Sep 6, 2021 at 6:21

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

9 Comments

M.imp Over a year ago

does this delete the object where the GraderId is $(this).val() ?

Dharmaraj Over a year ago

@M.imp yes and will return a new array without those values. Then use the new array to add items to HTML.

M.imp Over a year ago

Didn't work for me: $("#schoolGraders").on("dblclick", function () { var deletedGraderId = $(this).val(); $("#schoolGraders option[value=" + deletedGraderId + "]").remove(); array = array.filter(item => item.GraderId !== deletedGraderId); }); @Dharmaraj

Dharmaraj Over a year ago

@M.imp can you provide some HTML around that select?

M.imp Over a year ago

There is nothing more except the html code I have given in question

|

M.imp · Accepted Answer · 2021-09-08 04:23:04Z

1

I found the way, Thank you all. Here I wanted to share it to all so everbody can use it.

$("#schoolGraders").on("dblclick",
                function () {

                    var deletedGraderId = $(this).val();

                    var schoolId = $("#selectedSchools").val();

                    $.each(array,
                        function (i, r) {
                            if (r.GraderId == deletedGraderId && r.SchoolId == schoolId) {
                                array.splice(i, 1);
                            }
                        });


                });

answered Sep 8, 2021 at 4:23

M.imp

1201 silver badge11 bronze badges

Comments

Nice Books · Accepted Answer · 2021-09-06 10:39:03Z

The filter method filters an array removing elements that do not pass the condition argument. It's usally the best way to remove array element in js.

I think the main problem in your code is this.val(). this is quite an advanced js concept, as it has multiple meanings depending on the context. In your case, I think it refers to the current value r of your each callback, and not the select element. I prefer evt.currentTarget instead.

The following code must be called inside the done callback as the won't exist before. This kind of error, due to inexistent elements, is silently ignored by jQuery.

var schoolGraders = document.getElementBydId('schoolGraders');
schoolGraders.addEventListener('dblclick', (evt)=> {
    array.filter((obj,i)=>  obj.GraderId != +evt.currentTarget.value)
});

However I'd be vary of using the double click event as it has poor support on Android browsers.

Collectives™ on Stack Overflow

How can I remove an object in JavaScript?

4 Answers 4

5 Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related