Develop Reference

How can I get the value of span within a list using vanilla JavaScript?

I'm new to JavaScript and am having a tough time getting the value inside of span within a list. In my example below I want console.log() to return the string value of Active.
Also, I know I can directly get it by using, but want to avoid this as I need to get to the specific list first and then get the attribute value of the span. So example below is not what I'm looking for.
var x = document.querySelector('.checkout-form__step-text').innerText;
I've tried the following, but am not having any luck:
var thisStep1 = document.querySelector('.checkout-form__step--active').getAttribute('span')
console.log(thisStep1)
<li class = 'checkout-form__step checkout-form__step--active'>
<span class="checkout-form__step-text p3"> Active</span>
</li>

This should be your selector.
document.querySelector('.checkout-form__step--active span')
Please check the below snippet.
const thisStep1 = document.querySelector('.checkout-form__step--active span');
console.log(thisStep1.innerHTML)
<li class='checkout-form__step checkout-form__step--active'>
<span class="checkout-form__step-text p3"> Active</span>
</li>
For examples on using selectors, some useful links are:
Document.querySelector()
Document.querySelectorAll()
Locating DOM elements using selectors
Selectors
Attribute selectors

You are making a grave mistake. Selector .checkout-form__step--active does not contain the span attribute. And span is not an attribute, but a tag!
I have given two solutions. In the first solution, you get the content of the span tag, and in the second, you get the name of the span tag.
If I understand your question correctly, then you need to get the text of the span tag in the console. You can do it like this, using innerText, specifying the span tag in the selector when accessing. Like this:
('.checkout-form__step--active span')
var thisStep1 = document.querySelector('.checkout-form__step--active span').innerText;
console.log(thisStep1);
<li class = 'checkout-form__step checkout-form__step--active'>
<span class="checkout-form__step-text p3"> Active</span>
</li>
This is where you get the tag name using tagName:
var thisStep1 = document.querySelector('.checkout-form__step--active span').tagName;
console.log(thisStep1);
<li class = 'checkout-form__step checkout-form__step--active'>
<span class="checkout-form__step-text p3"> Active</span>
</li>

Need help using the .not() selector with nested elements

I am trying to clone an li element but without the tags.
I am have tried many different ways but I can make it seem to work.
When I take a look at the html of the li element it still selects the span tags.
Below is the code I am using. Any help would be really appreciated. Thanks!
<ul class="todo_list_items" data-category_id="44">
<li class="tasks" data-task_id="30">
<!-- Don't want to select this span class -->
<span class="modify_tasks">
<a href='#' class='delete_task_name'>Delete</a>
<a href='#' class='edit_task_name'>Edit Task</a>
</span>
Test
</li>
</ul>
<script>
$(document).on("click", ".edit_task_name", function () {
var task_id = $(this).data("task_id");
var previous = $(".tasks[data-task_id=30]").not(".tasks[data-task_id=30] > span").clone();
console.log(previous.html());
});
</script>

Just clone it and then empty it:
var previous = $(".tasks[data-task_id=30]").clone().empty();
EDIT: If you only want to remove the span and not other content, then just remove the span from the clone:
var previous = $(".tasks[data-task_id=30]").clone();
previous.children("span").remove();

not() will check against elements in the set, in your case the set consists of only $(".tasks[data-task_id=30]"). not() is testing the span inside it to see if it matches its own parent, so not wont be adjusting your jQuery object for cloning there. An alternative way to achieve what you want might be code similar to this:
var $tasks = $(".tasks[data-task_id=30]"),
$modifyTasks = $tasks.children('span').detach(),
$cloneOfTasks = $tasks.clone();
$modifyTasks.prependTo($tasks);
$cloneOfTasks.appendTo($tasks.parent());
.detach() removes the span without losing events and data so you can put it back in when your done making your clone.
Alternatively this code might be easier to interpret and use:
var $tasks = $(".tasks[data-task_id=30]");
$('ul.todo_list_items').append($tasks.contents().not('span').clone().wrap('<li class="tasks" data-task_id="30">').closest('li'));
This uses .contents() to grab whats inside the task so you can run not against it. The closest('li') part is needed to ensure the li wrapped around the new element is returned for appending to the ul.

How to get the div you want to delete by using its name

I've saved the name of the DIV I want to delete in a variable with JQuery.
I want to delete this div with JQuery. I tried this code:
var list = $('#myLists .list').attr('name') == oberpname; //oberpname is the variable with the name
for (index = list.length - 1; index >= 0; index--){
list[index].parentNode.removeChild((list[index]));
}
//$oberpname has the same name as in oberpname in JQuery above
<div id="myLists">
<div class="list" name=$oberpname></div>
</div>
When I run this code nothing happens. How can I refert exactly to div with JQuery?
EDIT NOTE:
Deleted some mistakes like the ID.

Use Attribute Equals Selector and than .remove()
$('#myLists div[name="oberpname"]').remove();

First of all your markup is invalid. Add name attribute value in quotes.and use:
$('#myLists div[name="oberpname"]').remove()
or from variable:
$('#myLists div[name="'+oberpname+'"]').remove()

You can just use:
$('#myLists div[name=oberpname]').remove();
instead of looping like what you're doing at this moment.

Use attribute selector
var oberpname = "somename";
$('div[name=' + oberpname + ']').remove();

for correctness, the element div does not have the "name" attribute. you may use id, class, or data-*, such as data-name.
<div class="list" data-name="custom-name">
...
</div>
if using data-name (assuming oberpname='custom-name'),
$('#myLists [data-name="'+oberpname+'"]').remove()
I'm not sure why you want to use variable in the HTML, as you can't do it like the one in your example. If you want to assign a variable for data-name via jQuery, you should target the element with a specific class then add attribute.
<div class="list">
</div>
your script should look like:
var customName = 'custom-name';
$('.list').attr('data-name',customName);
$('#myLists [data-name="'+customName+'"]').remove()

Using jquery 1.4 or javascript how would I target a specific link using a variable

HTML:
I've attached a simplified example of the problem I'm facing:
<h2>Product2</h2>
<div id="products">
<a class="my-product1" href="#"><span>my-product1<span></a>
<a class="my-product2" href="#"><span>my-product2<span></a>
<a class="my-product3" href="#"><span>my-product3<span></a>
<a class="my-product4" href="#"><span>my-product4<span></a>
<a class="my-product5" href="#"><span>my-product5<span></a>
</div>​
Javascript:
I'm already pulling myProduct from the page title and forcing lowercase. Next I'm attempting to remove this product from the group of links based on its class. Its quite possible this is jquery101 however I can't figure out how to add a class to a link using a variable to determine which class to select. In this example lets assume var myProduct = Product2
function removeProduct(myProduct){
$("a.myProduct").addClass("display-none");
};
Also, I am still learning so if you have the time a Brief explination of why what i'm doing is wrong would go a long way. Thanks for your time!

Simply concat the class name to the selector string:
$("a."+variable)...
Extra info as you requested:
Don't use a class "display-none"... change it's name or use jQuery native code that hides elements(hide(docs))
function removeProduct(myProduct){
$("a." + myProduct).hide();
};
Changing css rules is with the css(docs) function:
function removeProduct(myProduct){
$("a." + myProduct).css('display', 'none');
};
Adding class is with addClass function:
function removeProduct(myProduct){
$("a." + myProduct).addClass('someClass');
};
Change myProduct and removeProduct names to more meaningful variable names:
function hideAnchorElement(className){
$("a." + className).hide();
}

The class attribute / property is used as a generic selector - ie you can apply a class to multiple objects ... the id attribute / property is used for specific selection - and are unique. I suggest you change your HTML to use ids instead of classs
Try something like :
function removeProduct(myProduct){
$("a."+myProduct).css("display","none");
};
uses .css() to change the display property to none
or
function removeProduct(myProduct){
$("a."+myProduct).hide();
};
.hide() does the same thing as the .css() method does above
or
function removeProduct(myProduct){
$("a."+myProduct).addClass("yourclass");
};
where yourclass is a class you want to apply to an element.
And may I suggest you take a look at How jQuery works

Are you looking for this:
function removeProduct(myProduct){
$("a."+myProduct).addClass("display-none");
};
Separating the string selector from the variable

Try this if you want to hide the link on click event
$(function(){
$('#products a').on('click', function(e){
e.preventDefault();
$(this).hide();
});
});​
A fiddle is here.

Jump to anchor tag after clone

I have these hyperlink which will jump to anchor tags in UL some where
A
A
A
<ul>
<li><a name="A"></a></li>
<li><a name="B"></a></li>
<li><a name="C"></a></li>
</ul>
This is to make sure I jump to the right alphabetical letter in the list (which is long and will have scroller). The problem I have is that this is clone when document ready (requirement of the website for different purpose - cannot change here). So after the clone there are 2 sets of anchor tags doing the same thing. I can change the ID of on the clone but not the inner . The result I want is that when click on A or B or C, it will make the jump in the new clone instead
How to solve this problem? If there is a way to avoid using these anchor tag, it is fine too. I think jQuery has a way to jump to specific selector, right? Let me know.
Thanks

The jQuery ScrollTo plugin could solve your problem.
jQuery.ScrollTo
Related: JQuery focus
Or you could add this script:
clone.find("a[href^=#]").each(function() {
var anchor = $(this);
var name = anchor.attr("href");
anchor.attr("href", name + "_1");
clone.find("a[name=" + name.substring(1) + "]").attr("name", name.substring(1) + "_1");
});

In the same function where you create the clone also remove the name attribute from the LI elements of the original.

You can dynamically change the name attribute of the cloned elements:
$(function() {
names = ['A', 'B', 'C'];
$.each(names, function(i, name) {
$("[name='" + name + "']")[1].name = name + "2";
});
});
Then you can jump to "#A2" for example.