We Keep Coding

Remove input by clicking times icon

I have the following code which adds divs within a container (#subtask_container) via clicking a link (similar to Google Tasks):
HTML:
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
JS (this successfully adds unique inputs within the subtask container div along with a clickable x after each input)
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted"></i><br>');
i++;
});
What logic do I need to add to the x class to remove it's associated input?
I've tried
$('.fa-times').click(function(){
$(this).prev('input').remove();
});
but it doesn't seem to work...
Thanks!

You can simply wrap your subtask append in a div and simply use .parent() and .remove() function on that. No need to use <br>
Also, do not use .fa-times as primary click event handler as you might have other fa-times on the same page as well Which might cause issues later on. Add a custom class to your fa item (.subtask_remove_icon)
Live Demo:
var i = 1
$("#add_subtask").click(function() {
$("#subtask_container").append('<div><input name="subtask' + i + '" class="mt-1" id="subtask' + i + '" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted subtask_remove_icon"></i></div>');
i++;
});
$(document).on('click', '.subtask_remove_icon', function() {
$(this).parent().remove(); //remove the input when X clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>

The event handler gets attached to all elements that are on the page load. Since the icons are appended, the right way to do this would be the following:
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<div><input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted removeIcon"></i><br></div>');
i++;
});
$(document).on('click', '.removeIcon', function(){
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>

Jquery $('class', this) selector doesn't work

Hello I'm quite new with jquery and I can't get something to work.
I'm trying to transform a div with a .click function:
JQUERY
$(document).ready(function(){
$('#show').click(function(){
$('.element', this).toggleClass('hidden');
$(".change-width", this).toggleClass(' col-md-12 ');
$(".change-width", this).toggleClass('col-md-3');
$(".blok", this).toggleClass('same-height').toggleClass('h100');
if($(this).hasClass('SeeMore2')){
$(this).html('<i class="fa fa-angle-double-left" aria-hidden="true"></i> Terug naar overzicht');
} else {
$(this).html('Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i>');
}
});
});
HTML:
<div class="blokk change-width col-md-3 ">
<div class="blok same-height ">
<i class="fa fa-user-md fa-4x" aria-hidden="true"></i>
<h3>Hoofdpijn</h3>
<img class="element hidden" src="../images/behandelingen/headache.jpg">
<p>text</p>
<p class="element hidden">text</p>
</div>
<button id="show" onclick="fastScroll(document.getElementById('navigationz'))">Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
</div>
Somehow it works without the ,this selector but without the ,this it will select all divs which i obviously don't want.
Can anyone tell me what I'm doing wrong?
Thanks in advance :)

I don't believe $('.element', this) is valid syntax.
Alternatively, you're supposed to orient your DOM selectors relative to $(this) like a tree traversal. For example, in your situation, $(this) references the button with an id of show (because it is attached to the click handler).
Therefore, to access .change-width, you need to access the parent of $(this). In other words, replace
$(".change-width", this).toggleClass(' col-md-12 ');
with
$(this).parent(".change-width").toggleClass(' col-md-12 ');
As another example, if you want to access .blok, find the relationship between that element and $(this). .block is the previous sibling of this element. Therefore replace
$(".blok", this).toggleClass('same-height').toggleClass('h100');
with
$(this).prev(".blok").toggleClass('same-height').toggleClass('h100');
And finally, you want to access .element. I see that you have 2 .elements, and that both of them are children of .blok. In other words, .elements are the children of the previous sibling of $(this). Therefore replace
$('.element', this).toggleClass('hidden');
with
$(this).prev(".blok").children(".element").toggleClass('hidden');
Here are some jQuery documentation regarding these functions:
https://api.jquery.com/category/traversing/tree-traversal/

javascript click event not firing

I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}

The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {

('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id

Remove and Add class is not working in jquery

What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});

Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...

try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});

The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!

How to find closest <i>?

My HTML Code is as follow :
<div class="listitems">
user1#mail.com
<a style="float: right;vertical-align: top;" data-recom-user="3" data-recom-mile="4">
<i class="icon-eye-open"></i>
</a>
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" title="Recommend this user"></i>
</div>
i have trigger click event on <a> in event handler function i want to access closest <a>
i tried $(this).closest("<i>") in this i got <i class="icon-eye-open"></i> how i can get
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
Element so that i can change some some attributes of it.

Based on your HTML markup, you can use siblings() or next() instead:
$(this).siblings('i')
or:
$(this).next()
Also, note that closest() will traverse up the DOM tree, this method is not using to find the child elements

For getting inner anchor tag:
$(this).find("i")
For sibling:
$(this).siblings("i")

$(this).closest("<i>")
<i class="icon-eye-open"></i>
$(this).find("i .icon-hand-up")
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
$(this).find("i .icon-hand-up").attr('','') ; // you can change the attribute
or
$(this).parent().find("i:last").attr('','');

$(document).ready(function () {
$(".listitems a").click(function () {
var sss = $(this).find('i');
alert(sss.text());
});
});