Develop Reference

How to permanently remove an element from a jQuery object

here is the problem.
I have code like this where I get all li elements into a jQuery collection and then I remove last item from DOM. But I don't know how to also remove an element from a jQuery collection?
Now it's something like this:
console.log(myList);
['li.item', 'li.item', 'li.item']
I need to pop last item and get something like this:
console.log(myList);
['li.item', 'li.item']
var myList = $('.item');
console.log(myList);
myList.last().remove();
console.log(myList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<ul>

To remove an element in the jQuery object, you can use .splice().
To remove the last element :
myList.splice(-1);
To remove the first element :
myList.splice(0, 1);
It is important to know that the returned value is an HTMLElement. If you wanna do something with it, you need to convert it into a jQuery element again.
Unfortunatly, jQuery doesnt have pop or shift by default. But you can easily create those methods with that :
$.fn.pop = function(){
return $(this.splice(-1));
}
$.fn.shift = function(){
return $(this.splice(0,1));
}
Then call:
myList.pop();
myList.shift();
If you want to remove in the DOM and in the object, you can chain the remove function :
myList.pop().remove();
myList.shift().remove();
$(myList.splice(0, 1)).remove();
$(myList.splice(-1)).remove();

The problem is that $.fn.remove doesn't update collection elements and length property after it removes elements from DOM. As the result collection becomes desynchronized with actual DOM. What you can do however is to use combination of jQuery's remove method and native javascript pop or splice. It can be pretty concise:
$([].pop.call(myList)).remove();
Check the demo below.
var myList = $('.item');
alert(myList.length);
$([].pop.call(myList)).remove()
alert(myList.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<ul>

You can use .slice to select a specific cached item from the jQuery object, but it is little tricky to update the original cached element. I used .not function to filter out the removed element from the cached selector.
Explanation:
//read as numbered for better understanding
myList = myList.not( // 3. Use .not to remove the Last element from the
// cached selector
myList.slice(-1) // 1. Select Last element using .slice(-1)
.remove() // 2. Remove Last element
);
var myList = $('.item');
console.log(myList);
myList = myList.not(myList.slice(-1).remove());
console.log(myList.css('color', 'red'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<ul>

Inserting HTML into tag using JavaScript

I'm having a problem with JavaScript/jQuery at the moment where I'm trying to access the element inside the h4 element in my code. I'm doing this because I would like to dynamically display to the user how many guides are available in each "h4" section. For the PC section, it should display "4 reviews available" and for the Xbox One section, it should display "3 reviews available". However, both say " reviews available", and I'm assuming it's because I'm not using the jQuery functions properly. Here's the HTML code:
<h4><li class="console">PC (<span class="number"></span> reviews available)</li></h4>
<div class="gameList">
<ul>
<li class="game">Guide #1</li>
<li class="game">Guide #2</li>
<li class="game">Guide #3</li>
<li class="game">Guide #4</li>
</ul>
</div>
<h4><li class="console">Xbox One (<span class="number"></span> reviews available)</li></h4>
<div class="gameList">
<ul>
<li class="game">Guide #1</li>
<li class="game">Guide #2</li>
<li class="game">Guide #3</li>
</ul>
</div>
And here's the jQuery/JavaScript code:
$("h4").each(function() {
var node = $(this).children().children(); // gets node that has "number" class
var count = $(this).next().children().children().length; // gets number of li tags
node.innerHTML = count;
});
I tested whether or not it's properly getting the correct node and count by using the alert function for JavaScript, but for some reason, node.innerHTML = count won't display the contents of "content" properly in the element. Rather, it just displays a blank. Does anyone know why?

Its a jquery object not a DOM one..use this...
node.html(count);

node is a jQuery object here. It does not have "innerHTML". Instead you can use one of these:
node.html(count);
node.get(0).innerHTML = count;
node.get(0) will give you first DOM object from jQuery one.
A good practice is to prefix or suffix all jQuery objects with $ (e.g. $node), so that you will always know if a variable is meant to be a jQuery object.

use find() lot more cleaner and readable
$("h4").each(function() {
var $this=$(this);
var node = $this.find('.number');
var count = $this.next().find('li').length; // gets number of li tags
node.text(count); //or html()
});
and you have come invalid HTML li in h4 make sure you change that
working fiddle here

Do not use .children().children().
Only one .children() would do.
$(this).children('.game');
Also innerHTML is plain javascript. use .html(value) as node is JQuery Object.
$("h4").each(function() {
var node = $(this).children('.number');
var count = $(this).next().children('li').length;
node.html(count);
});
Reference to JQuery APIs:
.html()
.children()

$("h4").each(function() {
var $spanNumber = $('.console .number', this),
gameListCount = $(this).next().find('ul li').size();
$spanNumber.text(gameListCount)
});

You may use this also,
$("h4").each(function() {
var node = $(this).find('.number');
var count = $(this).next().find('.game').length;
node.html(count);
});

jQuery is swapping the tags that I insert

I have the following HTML:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and the following jQuery code:
$('> ul li', body).each(function()
{
$('</ul><ul>').insertBefore($(this));
});
This code should insert a closing tag followed by an opening tag for an unordered list in front of each list item, but instead it inserts <ul></ul>. These are the wrong way around! Why does jQuery do this and does anyone know how to solve this problem?

wrap each li in a ul and remove original outer ul
$('ul li').wrap('').end().find('ul').unwrap('ul');
Final html:
<body>
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
</body>
In action: http://jsfiddle.net/ZyMNn/
After a prompt to rethink a bit, simpler should work:
$('ul').find('li').wrap('<ul/>').parent('ul').unwrap();
Updated fiddle: http://jsfiddle.net/ZyMNn/2/

jQuery is not about inserting HTML markup somewhere. It is about manipulating the DOM - and to do that, $('</ul><ul>') will somehow get parsed to an element which then gets insertedBefore(this). Since </ul><ul> is invalid markup, your browser does its best when trying to parse it and comes up with <ul/> then, which gets inserted in your document.

jQuery will always fix invalid HTML.
$('</ul><ul>')
That is invalid. You can't start HTML with an end tag. Think of that string a tiny little HTML document. It has to be valid.
I'm a little confused on what you are trying to do? Are you trying to change.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
into this?
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
If so, then maybe something like this.
var list = $('> ul', body);
var x = $('<div>');
$('li', list).each(function(){
x.append($('<ul>').append($(this)));
});
list.html(x);

jump to named anchor with javascript

I have a php (codeigniter) program that displays all the finished projects of and engineering company. I can click the detail page and from there I can click a link to go back to the overview page. To avoid starting at the top of the list again I would like to jump to the project I cam from.
It seems easy but it gives me problems. I found this solution on the Internet that works with Chrome but not with Firefox and IE:
<script type="text/javascript" language="javascript">
function moveWindow (){window.location.hash="a13";}
</script>
<body onload="moveWindow()">
.
.
.
<a name="a13"></a>
The content of the anchor gets dynamically generated by PHP. As I said it works in Chrome only. IE says something like undefined function moveWindow when I go in debug mode.

You can attach a function to the details click that change the URL to currentURL#yourID and then change it to the final URL. This way, currentURL#yourID will be stored in the history of the browser and going back will get you to the right anchor.
Something like (assuming you use jQuery and your IDs are on the <a>):
$(document).ready( function() {
$('#yourlist a').click( function(e) {
e.preventDefault();
window.location = '#'+$(this).attr('id');
window.location = this.href; // intentionally not using jQuery ;-)
});
});
The HTML would look like:
<ul id="yourlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Not tested...

jQuery data gives me undefined

I'm trying the new data-function in jQuery but can't make it work.
Here is a little bit of code I use for testing:
HTML
<ul>
<li data-test="list">List item</li>
<li data-test="list">List item</li>
</ul>
<ul>
<li data-name="sida">oko</li>
</ul>
JS
var test = $('li').data('name');
alert(test);
The same thing on jsFiddle:
http://jsfiddle.net/w95mY/1/
I expect to get "sida" from the alert. I found out that it works if I delete the first list. Why is that? How do I solve it?

Consider telling jQuery how to find exactly one element. For example, tell it to look for any li element with a data-name attribute:
var test = $('li[data-name]').data('name');
alert(test);
Or you can tell it to look for the last li:
var test = $('li').last().data('name');
alert(test);
Both show an alert with text "sida".