Christian Gerlach Christian Gerlach - 3 months ago 8x
Javascript Question

JQuery fadeOut list element on click

I'm trying to fade out a clicked element in an ordered list.
on() seems to return the element which I can then manipulate but how do I generate the selector to actually fade out the visible li I clicked on in the HTML?

Here is my code, line in question is towards the bottom:

$("#steplist").on("click", ".step", function() {
var stepIndex = 0;
var li = this; // is the returned line

//gets index of clicked line in array by looping through elements
while (li.previousElementSibling) {
stepIndex++; //increments index counter
li = li.previousElementSibling; //sets li to be next li

//sets vars to values in temp, time fields
var temp = $("#temp").val();
var time = $("#time").val();

if (temp == 0 || time == 0) {
//alert("removing step" + stepIndex);
steps.splice(stepIndex, 1);
} else if (temp != 0 && time != 0) {
//needSelectorHere.fadeOut(3000, function(){
}); steps.splice(stepIndex, 1, [temp, time]);


You can use $(this) to refer to the element you clicked on, and $(this).index() returns its position as a child within its parent.



  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>


$('li').on('click', function() {