4

I have a jQuery object that is created via jQuery .find() as seen below...

var $mytable= $('#mytable');
var $myObject = $mytable.find("tbody tr");

This works great and creates a jQuery object of all the tr elements in the tbody. However, as I'm looping over the data, I need to be able to remove parts of the object as I go. For instance, if the above call returns a jQuery object named $myObject with a length of 10, and I want to remove the index 10, I thought I could just do $myObject.splice(10,1) and it would remove the element at index 10. However this doesn't seem to be working.

Any ideas why? Thank you!

UPDATE

I basically just want to be able to remove any element I want from $myObject as I loop through the data. I know it's zero based (bad example above I guess), was just trying to get my point across.

UPDATE

Okay, so I create the object using the find method on the table and at it's creation it's length is 24. As I loop over the object, when I hit an element I don't want I tried to use Array.prototype.splice.call($rows,x,1) where x represents the index to remove. Afterwards when I view the object in the console, it still has a length of 24.

Improve this question
4
  • @A1rPun $myObject.get().pop(); Commented Dec 17, 2013 at 21:26
  • @A.Wolff I soon realised :) But the answer depends on what the asker is doing with the output. Commented Dec 17, 2013 at 21:29
  • It's difficult to give you a "best" answer since you're not telling us what you're doing this for. What do you want to do with this jQuery object after you've selected it? Commented Dec 17, 2013 at 21:33
  • @Blazemonger I want to be able to remove elements from the object and have it re-indexed so if it has a length of 24, and I remove the data at index 15, it will show a new length of 23 Commented Dec 17, 2013 at 21:38

6 Answers 6

Reset to default
5

Use .not() to remove a single element, then loop through the jQuery object at your leisure:

var $myObject = $mytable.find('tbody tr').not(':eq(9)'); // zero-based

http://jsfiddle.net/mblase75/tLP87/

http://api.jquery.com/not/

Or if you might be removing more than one:

var $myObject = $mytable.find("tbody tr:lt(9)");

http://jsfiddle.net/mblase75/9evT8/

http://api.jquery.com/lt-selector/

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

1 Comment

This is all about selectors, not modifying an existing collection.
2

splice is not part of the jQuery API, but you can apply native Array methods on jQuery collections by applying the prototype:

Array.prototype.splice.call($myObject, 9, 1); // 0-index

You can also use pop to remove the last item:

Array.prototype.pop.call($myObject);

This should also give you a correct length property.

Improve this answer

5 Comments

sorry i read slice not splice but still splice() seems to work on jquery object
@A.Wolff splice method is correct. Browser caching issues prevented me from seeing the results. sorry for the trouble everyone.
@Phil You can use .splice() but be warned - it’s not an official part of the API and it might break at any release. See this line in the source: github.com/jquery/jquery/blob/master/src/core.js#L124
@David if I use the prototype am I still vulnerable to potential breaks?
@Phil nope, it should be safe because you are basically using native array methods instead.
1

splice is an array method, not a jQuery object method.

Try slice

Improve this answer

1 Comment

This seems to work - define the jQuery collection object with: var my_list_items = $("#my_list li"), then, if required, delete the item at a particular index from the dom with my_list_items.eq(9).remove(), and then to remove the item from the jQuery collection object use my_list_items.splice(9,1). After the last action, my_list_items.length returns the original item count minus 1. Is there any reason this approach would be discouraged?
0

Javascript uses zero-based arrays. This means that the final item in the array (i.e. the 10th item) will be at index 9.

$myObject[9]

So you need something like this:

$myObject.splice(9, 1);

This will remove the element from your existing array, and also return it.

Improve this answer

Comments

0

You could also use filter :

var $myObject = $mytable.find("tbody tr").filter(':lt(9)');
Improve this answer

Comments

0

You can use .remove to remove an element from the DOM.

So to remove the element at index 9 of the $myObject array, use:

$myObject.eq(9).remove();

If you want to keep the element that you are removing, you can also do:

var removedElement = $myObject.eq(9);
removedElement.detach();
Improve this answer

6 Comments

Why the downvote? He said he wanted to remove the element. He didn't say he just wanted it removed from the array. This does exactly that.
I didnt downvoted, but it is probly because .remove() is a jQuery function. By using [10], you are losing the jQuery object. It become a DOM element. Also, it is 0 based index, so it should be 9, not 10.
Also I know it is a 0 based index, I never said it wasn't notice I said remove the 'element at index 10' not 'the 10th element'. But if that is a big problem I can change it to 9 instead.
Not related, but just to inform you that your second statement "If you want to keep the element that you are removing, you can also do" is false. .remove() will destroy the element. I think you meant detach().
I downvoted because get() or [] returns a native dom node (or an array of dom nodes) and you can’t apply jquery methods on them (although there is an experimental remove() method on native nodes, but it’s not really standardized yet).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.