Develop Reference

Returning child element by clicking on elements with same class

help me out with this code, I am trying to assign a class to the clicked button's child element but when I fire a click event on any one of the button that class is assigned to all buttons child elements.I have written the jquery code for it mentioned below which works, but it works when i double click on one of the buttons and also the javascript code works in console but not in my js, html files i have the js block of code in $(document).ready(function(){}); function. I need help!
Html Code:
<div class="interact-Box">
<button class="p-emote"><i class="fas fa-thumb"></i></button>
<button class="p-emote"><i class="fas fa-thumb"></i></button>
<button class="p-emote"><i class="fas fa-thumb"></i></button>
<button class="p-emote"><i class="fas fa-thumb"></i></button>
</div>
Javascript Code:
$(.p-emote).on('click', ()=>{
var c = $(this).children('i');
$(c).toggleClass('interacted');
});

Use the event target (the event being the click, the target being the specific element that was clicked) by passing the event object into the callback.
$('.p-emote').on('click', (event)=>{
var c = $(event.target).children('i');
$(c).toggleClass('interacted');
});
EDIT: other answer rightly points out that you need quotes around the selector name ('.p-remote')
https://api.jquery.com/event.target/

You are missing single quotes around your selector and also don't use arrow function as it changes the way you are referencing $(this) into the window object. If you switch it back to something like the code below, you will see your children. Cheers.
$('.p-emote').on('click', function () {
var c = $(this).children('i');
console.log($(this).children('i'));
$(c).toggleClass('interacted');
});

Accessing properties of a tag within a tag

I have an a tag as follows:
<a href="data1.html" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-folder-close"></i>Root Folder
</a>
I have a function that gets called when you click on a tag. It is as follows -
$(document).ready(function() {
$("a").hover(function(event) {
console.log(event.target.href);
});
});
I can access the properties of a tag. Example: If i want to access the href of the a onclick, I can get it by event.target.href.
I want to access the properties of the i tag that is inside the a tag (for instance, class of i tag is "glyphicon glyphicon-folder-close").
How do I achieve that?
Also, what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item" are clicked?
Thanks in advance.

I want to access the properties of the i tag that is inside the a tag
Inside any jQuery event handler, this refers to the element on which the event was triggered: therefore you can use any selector relative to that element. $(this).children('i') for example will find the contained i given your HTML; if the element might be nested more deeply you'd want .find() instead of .children().
what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item"
Change the selector you're using to attach the handler - $("a.list-group-item") instead of $("a") to limit it to items having that class.
Note also that if you want this to work on click as you describe, rather than on hover as in your sample code, you'll need to return false from the event handler (so that the regular link navigation doesn't occur).
$(document).ready(function(e) {
$("a.list-group-item").click(function() {
var myChild = $(this).children('i')
console.log(myChild.attr("class")); // for example
return false; // prevent regular navigation from occurring on click
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" class="list-group-item">
<i class="glyphicon glyphicon-folder-close"></i> Will fire handler on click
</a>
<br>
<a href="https://example.com">
<i class="glyphicon glyphicon-folder-close"></i> Will navigate normally
</a>

Since you are using jQuery, this will be very easy!
$(document).ready(function() {
$("a.list-group-item").click(function(event) {
$(this).find('i').attr('class');
});
});
To get only certain anchor tags you can use a selector, read more about them here. Then you can use the this object to find children. Use the find method in jQuery. Finally use the attr to retrieve the class.

You can rewrite your function like this:
$(document).ready(function() {
//Only use list-group-item
$("a.list-group-item").hover(function(event) {
var $attrNode = $(this).find("i");
//Now that you have the list group item it is easy to get the attribute
var attributeValue = $attrNode.attr("your-attribute");
//You can also set the attribute
$attrNode.attr("your-attribute", "attribute value");
});
});

jQuery: $(this).attr('id') not find id of element - undefined

I'm trying to get id and just simply alert it onclick although is does just "undefined"...
Can you help me out?
important Code:
HTML:
<img src="/pictures/picture.jpg" class="r-gal-photo" id='1' onclick="alertme()" />
jQuery:
function alertme() {
alert($(this).attr('id'));
}
Can you see the problem? I can't...
My bad:
I'm sorry, I wanted to simplify the code and I did not realize that I used "alert()" as name for customized function.

First problem to fix is the function name, which I suspect is different in your actual code because otherwise you wouldn't have gotten as far as you have.
You've used an old-school "onclick" attribute to associate the function with the element. Nothing assures that this will be bound to the element as you expect. You could either change the element:
Better would be to use jQuery to bind the handler:
$("#1").on("click", function() {
alert(this.id);
});

The problem is, as others said - the context of the this keyword.
this refers to the DOM element (as you thought it does) in the CALL ITSELF, but once you called alertme() it is not defined in its scope.
To see it you can look at this JS:
function alertme(){
alert($(this).attr('id'));
console.log(this);
}
and this HTML markup:
<img src="/pictures/picture.jpg" class="r-gal-photo" id='abc' onclick="console.log(this); alertme()" />
And you will see that you get in the console first the element, then in the alert 'undefined' and then in the console the window.
To fix it you can either simply specify the meaning of this in the call, using javaScript's Function.prototype.call() function:
Change only in the HTML the markup to
<img src="/pictures/picture.jpg" class="r-gal-photo" id='abc' onclick="alertme.call(this)" />
and it will work with the your alertme().
OR you can just pass this into alertme like so:
function alertme(elem){
alert($(elem).attr('id'));
}
HTML:
<img src="/pictures/picture.jpg" class="r-gal-photo" id='abc' onclick="alertme(this)" />
Sources:
Nice article to understand 'this' in jQuery
this in JS binded by on markup

Passing element ID to function

I have this function:
function op_up(){
this.style.color=#FF0000;
}
And I have this HTML element:
<span id="trigger" onClick="op_up(#element_1)">Click to change #element_1<span>
<span id="trigger" onClick="op_up(#element_2)">Click to change #element_2<span>
I would like the function to affect the id of the element in the onClick event.
Any help would be much appreciated. Thanks :)

Your function call is not valid, but you can pass a string to the function:
op_up('#element_1')
Then you can use document.querySelector to get a reference to the element:
function op_up(selector){
document.querySelector(selector).style.color='#FF0000';
}
Or as I already said in the comments, if you pass the ID as
op_up('element_1')
use document.getElementById:
function op_up(id){
document.getElementById(id).style.color='#FF0000';
}

How can a function find a parent element of the anchor which originally called the function?

Ok, the question alone is making my head spin.
I have an anchor tag that is calling a function:
Add a Guest
Just for reference, this is the function that's being called:
function addPerson() {
//current keeps track of how many rows we have.
current++;
console.log($(this).parent('form').attr('id'));
var strToAdd = '<div class="row">\
<div class="column grid_2">\
<label for="two-guests-name'+current+'">Guest '+current+':</label>\
</div>\
<div class="column grid_5">\
<input name="two-guests-name'+current+'" type="text" id="two-guests-name'+current+'" value="Name" onfocus="RemoveFormatString(this, \'Name\')" /> \
<input name="two-guests-age'+current+'" type="text" class="guestage digits" id="two-guests-age'+current+'" value="Age" size="4" maxlength="3" onfocus="RemoveFormatString(this, \'Age\')" />\
</div>\
</div>'
$('#numberguests').append(strToAdd)
};
I'd like to allow this function to work on multiple forms on a single page. So my thinking was to travel back in the tree to the parent form element, get its id and use that (somehow) to allow the function to work on multiple forms in the page.
You can see I tried using a quick console.log to test my idea, but it kept coming back "Undefined". I also tried running the console.log in the anchor tag itself, but it also was "Undefined".
I tested .parents() and it works perfectly in the anchor tag, but not in the function iteslf.
Any suggestions?

You should pass $(this) into add parents and then you'll have the proper scope to work with in your function. So:
Add a Guest
and then in the function use:
function addPerson(anchorElement) {
var form = anchorElement.parents("form");
//etc.
}

Don't use the onclick attribute use jQuery event binding. As you didn't provide any info about the markup you need to fill in the selector yourself
//this binds the same function to all a tags specified by the selector
$("form somemoreselectorgotgettheright a").bind("click", function() {
console.log($(this).parent("form").attr("id"));
....
});

The this context is different. Change the onclick to this:
addPerson.call(this);
That will make the this in the function match up with the this in the anchor tag.
Or better yet, don't use an onclick attribute at all, but use a jQuery event handler attachment, like this:
$(document).ready(function() {
$('#addPerson').click(function(ev) {
ev.preventDefault();
// Do something with $(this), which is the anchor tag
});
});
And your anchor tag would not have any click handler on it:
Add a Guest

Use parents() with a selector (this will search upward through all parents until the match i found). e.g.
$(this).parents('form').[...]

Pass in the id as a parameter. Eg
Add a Guest
then...
function addPerson(parent_id) {
// do something with parent_id