Develop Reference

Parse HTML without IDs or classes

Is it possible to use Javascript to parse html without IDs or classes?
For example I want to delete everything from "Starting date" to "Starting time"
<div class="timer">
<!--Starting date-->
<select>
<option value="1"></option>
<option value="2"></option>
</select>
<!--Starting time-->
<select>
<option value="1"></option>
<option value="2"></option>
</select>
<!--more select tags here>
</div>

This work after making the nodelist static
let hideDate = true; // your condition
const startText = "Starting date",
endText = "Starting time";
if (hideDate) {
let i = 0;
const nodes = [...document.querySelector(".timer").childNodes]; // make list static
for (; i < nodes.length; i++) {
if (nodes[i].nodeType === 3 &&
nodes[i].textContent.trim() === startText) break;
}
for (; i < nodes.length; i++) {
if (nodes[i].nodeType === 3 &&
nodes[i].textContent.trim() === endText) break;
nodes[i].remove();
}
}
<div class="timer">
Starting date
<select>
<option value="1"></option>
<option value="2"></option>
</select>
Starting time
<select>
<option value="1"></option>
<option value="2"></option>
</select>
</div>

i think you can do something like this:
you have to select this element from javaScript for example:
var elementsContainer = document.getElementsByClassName/TagNames('element class or element tag name');
this will return you a list of elements, so you need to get one of them, like this:
elementsContainer = elementsContainer[0]
this will give you one element, so after this, you can delete its content like this
elementsContainer.innerHTML/innerText = '';
you can choose one of this property innerHTML or innerText according to which you need

Well for your problem. I would suggest to have a look at the concepts of jquery remove(), and jquery empty(). here are some working test demos of these two methods.
<script>
$(document).ready(function(){
$(".timer select").remove();
});
</script>
The above code will completely remove the elements inside the div element. see here Jquery Remove Wroking Example
<script>
$(document).ready(function(){
$(".timer").empty();
});
</script>
This method removes not only child (and other descendant) elements, but also any text within the set of matched elements
Jquery Empty Working Example
Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it.
If you want to do it with core javascript then have a look at it.
Jquery Remove method using core JS

let timer = document.querySelector('.timer')
const from = 'Starting date'
const to = 'Starting time'
let html = timer.innerHTML
timer.innerHTML = html.slice(0, html.search(from)) + html.slice(html.search(to))
<div class="timer">
Starting date
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
Starting time
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

How to select drop down <option> by index with JavaScript where index value is grater than 325?

I am unable to select index above 325 in following scenario
<select id="item">
<option value="0">Some Text...</option>
.
.
.
<option value="412">Some Text...</option>
</select>
<script>
document.getElementById("item").options[412].selected = true;
// Also tried with jQuery
$('#item option')[412].selected = true;
</script>

You do not need the '.options' after selecting the element from DOM.
Following is the correct syntax:
document.getElementById("item")[412].selected = true;

Why does onChange only work once per value

Each time the web page is loaded the onchange method works, but it only works once per value. When summer is selected the classes are added, when i chose winter the class is added but then if i chosesummer again it will not work. Why is this?
const landingBGR = document.querySelector(".landing-wrapper");
const landingBTN = document.getElementById("l-btn");
function selectedSeason(season) {
switch(season) {
case "summer":
landingBTN.setAttribute("href","summer.html");
landingBGR.classList.add("summer-bgr");
break;
case "winter":
landingBTN.setAttribute("href","winter.html");
landingBGR.classList.add("winter-bgr");
break;
}
}
<select name="" id="landing-drop" onchange="oninput(this.value)">
<option value="">Ireland in the four Seasons</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>

try to delete the old class when you select a new option.
landingBGR.classList.remove("summer-bgr");
landingBGR.classList.remove("winter-bgr");
you will maybe need
if(landingBGR.classList.contains("classname"))

Obtaining value of select list each change with jQuery

I have a select list that I would like to display a different image in the same div each time the user changes the select list. Here's what I have so far:
HTML
<div id="branches">
<h3>British Columbia Old Age Pensioners' Organization — Branches</h3>
<select id="branch-number" class="form-control">
<optgroup label="British Columbia">
<option value="1">Branch 1</option>
<option value="2">Branch 2</option>
<option value="http://placehold.it/350x350">Branch 3</option>
<option value="http://placehold.it/350x450">Branch 4</option>
</optgroup>
<optgroup label="Alberta">
<option value="5">Branch 5</option>
<option value="6">Branch 6</option>
...etc...
</select>
<div id="img-window">
<img id="branch-img" src="http://placehold.it/350x150" class="img-responsive">
</div><!-- end img-window -->
</div><!-- end branches -->
jQuery
$(document).ready(function () {
$('#branch-number').on('change', function () {
alert('something happened');
// var branchVal = $('this').val();
var branchVal = $('option:selected').val();
switch (branchVal) {
case 1:
$('#branch-img').attr('src', 'http://placehold.it/150x150');
break;
case 2:
$('#branch-img').attr('src', 'http://placehold.it/250x250');
break;
case 3:
$('#branch-img').attr('src', 'http://placehold.it/350x350');
break;
default:
$('#branch-img').attr('src', 'http://placehold.it/1450x1450');
}
});
});
Right now, nothing happens when the user changes the select list. I am trying to do this with an <img> tag instead of CSS so that for increased accessibility of the alt="" attribute.
I'm just starting to get the hang of javascript / jQuery ... any help appreciated.
Here's a fiddle:
https://jsfiddle.net/r1fcvs7s/4/
edit: syntax should be all good now.

Your case syntax is wrong. It should be:
switch(branchVal) {
case 1:
$('#branch-img').attr('src', 'http://placehold.it/150x150');
break;
case 2:
$('#branch-img').attr('src', 'http://placehold.it/450x450');
break;
}
The : comes after the value, not before. And you need break between the cases unless you want to fall through into the next case (which you obviously don't in this code).
You should have gotten a syntax error in the Javascript console. How did you miss that?
BTW, to get the value of the <select>, you can use $(this).val(). You don't need to access option:selected.

HTML
<select id="branch-number" class="form-control">
<optgroup label="British Columbia">
<option>1</option>
<option>2</option>
<option>Three</option>
<option>Four</option>
</optgroup>
</select>
jQuery
$(document).ready(function() {
$('#branch-number').on('change', function() {
// var branchVal = $('this').val();
var branchVal = $('#branch-number').find(':selected').text();
switch(branchVal) {
case "1":
$('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Abbotsford+Branch');
break;
case "2":
$('#branch-img').attr('src', 'http://placehold.it/250x250/9d9999/000000&text=Chilliwack+Branch');
break;
case "Three":
$('#branch-img').attr('src', 'http://placehold.it/150x150/9d9999/000000&text=Mission+Branch');
break;
case "Four":
$('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Vancouver+Branch');
break;
}
});
});
Had to use the .find(:selected).text(); method instead of the .val(); method. This is because the value attribute is only used for forms and other things but, not boxes.

Switch/case usage for selected value in selectbox

I have a selectbox with a couple of options in it. When an option is selected, the Javascript code gets the value of the selected option and has to change the font of a text accordingly.
I figured I would use the Switch-Case statement because I have multiple options, but it doesn't seem to work, nothing changes.
Javascript
function font() {
var sf = document.getElementById('box').value;
var generate = document.getElementById('generate');
switch (sf) {
case 'TimesNewRoman':
generate.style.fontFamily('Times New Roman')
break;
case 'Georgia':
generate.style.fontFamily('Georgia')
break;
case 'PalatinoLinotype':
generate.style.fontFamily('Palatino Linotype')
break;
default:
generate.style.fontFamily('Arial')
}
}
HTML
<select id="box" onchange="font();">
<option id="TNR" value="TimesNewRoman">Times New Roman</option>
<option id="GRG" value="Georgia">Georgia</option>
<option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
</select>
<br />
<div id="generate">This is some text</div>
NOTE
I have more options in the list but I have shorten it for the sake of simplicity.
Am I wrong for using this statement, or am I missing something entirely?

You haven't made an assignment, use generate.style.fontFamily = "Arial";