We Keep Coding

Why is my jquery removing the first elements in a list instead of specified ones?

I'm trying to loop over a list in my html with a .each() loop, and removing any elements with matching ids.
<ul>
<li id="0" class="liRem">zero</li>
<li id="1" class="liRem">one</li>
<li id="2" class="liRem">two</li>
<li id="3" class="liRem">three </li>
<li id="4" class="liRem">four </li></ul>
And the jquery:
var output = [1, 3];
$(document).ready(function () {
$("ul li").each(function () {
if(this.id in output) {
$(this).remove();
};
});
});
However, instead of removing the specified li element, it just removes the next 'first' one on the page.
Also, I can't change the fact that I'm using an array, and the list is the only one on the html document. I'm new to jquery, so any advice would be greatly appreciated

Javascript doesn't have the functionality "value in array". This is used for for loops to loop over each element of an object.
Instead you should use either JQuerys inArray method or array.indexOf(value) > -1.
Additionally the Ids are strings, while your array contains numbers.
This works:
var output = ["1", "3"];
$(document).ready(function () {
$("ul li").each(function () {
if(output.indexOf(this.id) > -1) {
$(this).remove();
};
});
});
https://jsfiddle.net/07atsh5o/

try this script using jquery inArray and get the id using jquery .attr('id')
<script type="text/javascript">
$(document).ready(function () {
var output = ["1", "3"];
$("ul li").each(function () {
if($.inArray($(this).attr('id'), output) !== -1){
$(this).remove();
};
});
});
</script>

Too bad JavaScript doesn't have a nice function to simply check if an array contains a certain element. Nevertheless you could make one yourself by using this snippet:
Array.prototype.contains = function (search) {
for (key in this) {
if (this[key] == search) {
return true;
}
}
return false;
}
This function wil check whether your array will contain the given value or not and returns true or false. You can use it like so:
output.contains($(this).attr('id'));
Please also note my usage of retrieving an id of an element, because the way you do it now is incorrect. I created a jsFiddle for you, so you can check it out yourself and play with it a bit.
Hope this helps!

The "in" function doesn't work for the array, since "in" is to be used with for loop, because it gives only index values.
So try using one simple for loop with it:
And here is the example demo:
https://jsfiddle.net/HimeshS/pqrtqtkv/1/
for(var i in output){
if(this.id == output[i]) {
$(this).remove();
}
}

correct use of .is(':visible')

I have this code
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>
<script>
$(document).ready(function() {
var visible_elem_height = $('div').is(':visible').height()
alert( visible_elem_height )
});
</script>
but my code Doesn't work , So what do u suggest ?

.is() return a boolean value so your script will fail, instead you need
$(document).ready(function () {
var visible_elem_height = $('div:visible').height();
//or var visible_elem_height = $('div').filter(':visible').height()
alert(visible_elem_height)
})

$('div').is(':visible') returns true/false depending on the visibility of your element. On the other hand, .height() function is applied on the element and NOT on the boolean output. Therefore, $('div').is(':visible').height() will simply not work.
To achieve the desired behaviour, use the :visible selector $('div:visible').height()
$(document).ready(function() {
var visible_elem_height = $('div:visible').height()
alert( visible_elem_height )
});
plunkr

Try utilizing .filter()
$(document).ready(function() {
var div = $("div").filter(function(i, el) {
return $(el).is(":visible")
});
if (div.length > 0) {
alert(div.height())
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

The statement is(':visible') returns true or false as output. If you want to get the height of the element, you can directly get it using the .height() method.

Change an ID upon click

I know how to change a class name with another class upon click, but not sure how to do so when using id instead.
Below is how the class is setup:
<script>
$(function(){
$(".collapseArrow").click(function(){
$(".collapseArrow").removeClass("collapseArrow")
$(this).addClass("collapseArrowUp")
return false;
})
})
</script>
The reason for that is that the class is already being used and i have to use the id to style it instead.

Plain Javascript approach:-
This approach takes advantage of the this keyword as follows...
HTML:
<div id="oldId" onclick="changeId(this)"></div>
JS:
function changeId(element) {
element.id = "someNewId";
}
or simply (in one line) as part of the HTML
<div id="oldId" onclick="this.id='someNewId';"></div>
jQuery approach:-
Use the attr() function as follows...
$(function(){
$("#oldId").click(function(){
$("#oldId").attr("id","newId");
return false;
});
});
EDIT: As requested, I will give a piece of code to toggle between 2 ids.
HTML:
<div id="firstId" onclick="toggleId(this)"></div>
JS:
function toggleId(element) {
if(element.id == "firstId") {
element.id = "secondId";
} else { //This will only execute when element.id == "secondId"
element.id = "firstId";
}
}

You can use the attr() function
<script>
$(function(){
$("#collapseArrow").click(function(){
$("#collapseArrow").attr('id',"collapseArrowUp");
return false;
});
});
</script>

Instead of changing the id, do it with multiple classes.
This could help you...
$(function(){
$(".collapseArrow").click(function(){
$(".collapseArrow").removeClass("up")
$(this).addClass("up")
return false;
})
})

You can use
$(this).attr("id"',"new id");
But i would use classes and add important to override existing css rules
Hope i helped

i have to use the id to style it instead.
I suggest you not to do this because in the dom structure ids have most preference against the class names. So this would be little difficult to override the styles which have been applied with the ids.
Instead i would recommend to use classes instead:
$(function() {
$(".collapseArrow").click(function() {
$(this).toggleClass("collapseArrow collapseArrowUp")
return false;
});
});
$(function() {
$(".collapseArrow").click(function() {
$(this).toggleClass("collapseArrow collapseArrowUp")
return false;
});
});
.collapseArrow::before {
content: "[-]"
}
.collapseArrowUp::before{
content: "[+]"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class='collapseArrow'></h1>

You should not change an id. If you need to use a different selector to select the same element, add another class to the element, e.g.
<span class="collapsArrow SomethingMeaningful"></span>
Then you just need to use a different selector method:
$( "span[class~='SomethingMeaningful']" )
.removeClass("collapseArrow")
.addClass("collapseArrowUp");
Then you can style the element with:
.SomethingMeaningful{
}

Unable to get div value for voting system

When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.

Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()

First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.

Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>

Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});

In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();

Javascript replace has no effect

This is the jQuery:
<script type="text/javascript">
$(document).ready(function(){
var relName;
$('.child').each(function() {
relName = $(this).attr('rel');
relName.replace('&','');
$(this).attr('rel', relName);
$(this).appendTo('#' + $(this).attr('rel'));
});
});
</script>
With this relevant HTML:
<div rel="MadDogs&EnglishmenHandpaintedfigurines" id="Figurines" class="category section child">
<h3 class="categoryTitle">Figurines</h3>
</div>
But for some reason, the replace has no effect whatsoever!

replace returns string with replaced data. So you need to assign back to your variable.
relName = relName.replace('&','');

replace() doesn't change the original string, it returns a new one.

It's not updating because you're not assigning the result to anything.
Try this instead:
$(this).attr('rel', relName.replace('&',''));

Here's a neat way to write it, using the callback version of attr basically every jQuery method:
$(document).ready(function() {
$('.child').attr('rel', function(i, relName) {
$(this).appendTo('#' + relName);
return relName.replace('&','');
});
});