Develop Reference

Finding the text inside this element

I'm looking to make a fairly simple operation: you click on an li, you get the text inside, using JavaScript (not JQuery). What I can't figure out (or find out) is how to get the innerHTML.
function enable() {
document.addEventListener('click', e => {
if (e.target.classList.contains('refine-menu-li')) {
var selected = this.innerHTML;
console.log('stuff'); // Working
console.log(selected); // Not working
}
});
}
Is the problem that I am using class and so require a for-loop? Or is this a foolish thing to try and use?
Thanks!

You could try something like this, without using an arrow function:
document.getElementById("js-list")
.addEventListener("click",function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log(e.target.innerHTML);
}
});
<ul id="js-list">
<li>value1</li>
<li>value2</li>
<li>value3</li>
</ul>

Arrow functions capture this from the context they are declared in.
this.innerHTML is not the innerHTML you are looking for.
You probably want e.target.innerHTML.
If you weren't using an arrow function, then this will wouldn't be the value you wanted. Event handlers are called in the context of the element they are bound to (document in this case), not the element that triggered the event.

Try this
function enable() {
document.addEventListener('click', e => {
var current = e.target;
if (e.target.classList.contains('refine-menu-li')) {
var selected = current.innerHTML;
console.log('stuff'); // Working
console.log(selected); // Not working
}
});
}
enable();
<ul>
<li class='refine-menu-li a'>1 </li>
<li class='refine-menu-li b '>2</li>
<li class='refine-menu-li c '>3</li>
<li class='refine-menu-li d'>4</li>
</ul>

select2 jQuery plugin: how do I get a reference of the list of <option> tag replacements?

with the following code
$('select.my-select').select2().on('select2:opening', function (event) {
console.log(event, this);
});
the logged this is the 'original' <select> DOM element. But how do I get its replacement/representation? I'm talking about the <ul> with class select2-results__options.
I'm using the latest select2 beta version (currently 4.0.0 Beta 3).
thanks

If I was right, the <li>s in the <ul> are in the same order as the <option>s in the original <select>.
So you can select the <ul> then go through its childs and get the corresponding `'.
Try this one:
$('select.my-select').select2().on('select2:opening', function (event) {
var $select = $(this);
$('.select2-results__options > li').each(function(i) {
var option = $('option:nth-child('+i+')',$select);
console.log($(option).val());
});
});
Ps.: I can't test it now, but if you provide a Fiddle, it can be tested.
Or if you want to style the results, try this one (this code is for select2 3.5.1, but I think it should work with 4.0 too):
$('#myselect').select2({
data: categories,
allowClear: true,
formatResultCssClass: function(obj) {
if (obj.disabled) { return 'select2-item-cat-parent'; }
else { return 'select2-item-cat'; }
}
});

Form Validation - Add/Remove Jquery Dynamically Added Content

I'm working with some form validation.
I run the validation on a .blur event for each input.
During each validation, I create a validation summary at the top of the page, listing out all of the errors.This is currently working, with the exception that I can not clear errors from the list.
My question, how can I remove the errors list on each .blue event.
I've added a comment where I've tried to clear the error list.
My Code:
<script>
$(function () {
$("#EditPhone input").blur(function () {
var a = $(this).parent();
var b = a.find(".k-tooltip").text();
$(".validation-summary-errors ul").html(""); // This does not work
$(".k-tooltip").each(function () {
var c = $(this).text();
$(".validation-summary-errors").show();
$(".validation-summary-errors ul").append("<li>" + c + "</li>");
});
});
});
</script>
<div class="validation-summary-errors" style="display:none;">
<ul>
</ul>
</div>

You can try empty() method for example:
$(".validation-summary-errors ul").empty();

You can try remove() method for example:
$(".validation-summary-errors ul li").remove();

Making this JS code unobtrusive. Writing an event listener for unknown id

I've been building out the functionality for this UI. These are a pair of tabs I want to write a listener for, to make my js unobtrusive. It was blocking me from going forward. Now that I'm refactoring, it's time to fix it. I want to write an event listener that gets the id of the tab that was clicked, and assigns it to a variable. This is what I have:
<ul id="gal">
<li class="glyphicons camera active" onclick="pullActive(this.id);" id="viewAll"><a href="#" ><i></i> View all photos <strong>(43) </strong></a>
</li>
<li class="glyphicons circle_plus tab-stacked" onclick="pullActive(this.id);" id="addPhotos"><i></i> <span>Add Photos</span>
</li>
</ul>
function pullActive(id){
// gets the class for that id
var getClassy = document.getElementById(id).className;
findClass(getClassy, id);
loadNew();
}

without jQuery you would have to do
var item = document.querySelector("#gal");
item.attachEventHandler("click", function(ev) {
if (ev.target.tagName === "LI") {
var id = ev.target.id;
// ...
}
});
In jquery (as you tagged your question like this) it would look like this
$(function() {
$("#gal").delegate("li", "click", function() {
var id = this.id;
// ...
});
});

jQuery solution:
$('#gal li').on('click', function () {
var className = $(this).attr('class');
var id = this).id;
console.log(className, id);
});
Vanilla solution:
[].forEach.call(document.querySelectorAll('#gal li'), function (glyphicon) {
glyphicon.addEventListener('click', function () {
var className = glyphicon.className;
var id = glyphicon.id
console.log(className, id);
});
});
Here is a fiddle containing both examples.

Using jQuery, this would be
$( document ).ready(function() {
$( '#gal' ).on( 'click', 'li', function() {
var id = this.id
});
});
The benefit of this approach is that you only have one event handler (defined on the ul) vs. having one for each li. Hope this helps.

The show/hide function is not working with the clone function

I have a problem triggering the show() and hide () function in jQuery when I use it together with the .clone() function.
There isn't any problem showing or hiding the first id but when it comes to a cloned id, showing or hiding doesn't work on it.
Here's a sample js of it:
var $country = $('#country')
$('#add-countries').on('click', function () {
$(this).before($country.clone());
});
$('#morelocal').on('click', function () {
$('#showzipcode').toggle();
$('#morelocal').hide();
});
$('#hidezipcode').on('click', function () {
$('#morelocal').show();
$('#showzipcode').hide();
});
Full jsfiddle here: http://jsfiddle.net/stan255/Wh274/7/

Since you are cloning the elements
It is better to use classes instead of ids because id of an element must be unique
And need to use event delegation to support dynamically added elements
so
<div>
<!-- use class instead of id -->
<a href="#" class='morelocal'>
Track ZIP/Postal code
</a>
<!-- use class instead of id -->
<span class='showzipcode'>
<input type="text" placeholder="e.g: 30196"/>
<a href="#" class='hidezipcode'>cancel</a>
</span>
</div>
then
var $country = $('#country')
$('#add-countries').on('click', function () {
var $clone = $country.clone().removeAttr('id');
$(this).before($clone);
$clone.find('.morelocal').show();
$clone.find('.showzipcode').hide();
});
//use event delegation
$(document).on('click', '.morelocal', function () {
var $div = $(this).closest('div');
$div.find('.showzipcode').show();
$div.find('.morelocal').hide();
});
$(document).on('click', '.hidezipcode', function () {
var $div = $(this).closest('div');
$div.find('.morelocal').show();
$div.find('.showzipcode').hide();
});
Demo: Fiddle, Fiddle2