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>
Related
Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.
<body>
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle" id="not-active"></i>
<i class="fa fa-plane" id="not-active"></i>
<i class="fa fa-ship" id="not-active"></i>
<i class="fa fa-fighter-jet" id="not-active"></i>
<i class="fa fa-space-shuttle" id="not-active"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
</div>
</body>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
let currentImg = $('#active');
let nextImg = currentImg.next();
if(currentImg.length){
currentImg.removeAttr('#active').css('z-inex', -10)
nextImg.attr('#active').css('z-index', 10);
}
});
});
First of all, I recommend using class instead of id. Even if you are going to use id, it is not recommended to use this way. The id value must be uniq. In your case, your ID's are not uniq. And also this is better to use like this ID selector.
id="notActive"
You can just try with each function to get current div. I tried with your code but did not work, with each yes.
$('.fa').each(function(){
if( $(this).hasClass('active') ){
currentImg = $(this);
}
})
And bonus : You can also use current div index value, then you dont have to use prev, next. You can increase or decrease index the value one by one. Just a suggestion.
You are using the id attribute incorrectly, as every id must be unique.
Also, setting the z-index on elements has no effect.
Finally, jQuery is not helping and can be eliminated.
Here's a more standard way to make something active/inactive, using a class named `active':
// control buttons
const right = document.querySelector('.right-arrow');
// handle right click
right.onclick = function() {
const activeImg = document.querySelector('i.active');
const nextImg = activeImg.nextElementSibling;
if (activeImg && nextImg) {
activeImg.classList.remove('active');
nextImg.classList.add('active');
}
};
i {
font-size: 32px;
z-index: -10; /* this has no effect */
}
.active {
z-index: 10;
background-color: yellow;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
right-arrow
</div>
</div>
</div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I want to remove the parent p tag when the cross button is clicked.
My HTML structure is like this :
jQuery('.delete').click(function() {
jQuery(this).closest('.question-list').remove()
});
jQuery('.add-question-btn').click(function() {
jQuery("#add-question-div-parent").append("<p class='add-question-div' style='position: relative'><input type='text' class='add-ques-text' placeholder='Add Question'><span><i class='fa fa-times cls' aria-hidden='true'></i></span></p>");
});
jQuery('.cls').click(function() {
jQuery('.add-question-div').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="question-list">Here is my question.Here is my question.Here is my question.
<span><i class="fa fa-times delete" aria-hidden="true"></i></span>
</p>
<div id="add-question-div-parent" class="full-width"></div>
<button class="add-question-btn">+</button>
.add-question-div this has been added successfully after '.add-question-btn' button has clicked, but unfortunately i'm not able to remove .add-question-div when i click on .cls.
Any kind of help would be highly appreciated. Thanks.
The .cls element is added dynamically so the click event is not associated at the time of page load so use $(document).on('click','.cls', function(){...});. You also need to delete the particular add-question-div when the icon is clicked so use $(this).closest('.add-question-div').remove();
$('.delete').click(function() {
$(this).closest('.question-list').remove()
});
$('.add-question-btn').click(function() {
$("#add-question-div-parent").append("<p class='add-question-div' style='position: relative'><input type='text' class='add-ques-text' placeholder='Add Question'><span><i class='fa fa-times cls' aria-hidden='true'>X</i></span></p>");
});
$(document).on('click','.cls', function() {
$(this).closest('.add-question-div').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="question-list">Here is my question.Here is my question.Here is my question.
<span><i class="fa fa-times delete" aria-hidden="true"></i></span>
</p>
<div id="add-question-div-parent" class="full-width"></div>
<button class="add-question-btn">+</button>
on my screen i am showing a few inputs like this.
<span>
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
all i want to do is when the user losses focus and does not click the check r times icon. an event should be triggered.
In simple words if the user presses anything other than these five elements i want to call an event. I have tried to apply (blur)="SomeMethod" to the span above, but it is useless. And applying it on input tag simply calls the event even if the i in the same group is clicked
use
<span tabindex=0></span>
to ger focus on your span and then you can call blur method.
so basically the blur event fires when the focus is lost. By default, a div or span element cannot have the focus in the first place so it can't be lost.
here if you set tabindex on a span, then it can gain the focus and you call your function on blur. this also works with tab key press event.
for more check this fiddle
it is done in core js, not on angular but you can use the same logic in angular refer, try this
document.body.addEventListener("click", function() {
var parents = [];
var p = event.target;
while (p !== document) {
var o = p;
if(o.className.indexOf("input-items") !== -1) break;
p = o.parentNode;
}
if(p === document) {
// your code here
console.log("here");
}
})
<body>
<span class="input-items">
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
</body>
Go for
(clickOutside)="something"
on span
check here
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
I've code few line of jQuery for Hide/Show many elements on single click and it's working. But problem is; i've many more image class items, so my script going to long, my question is how to simplify or make short my script, i mean any alternatives or any new idea? please suggest.
HTML:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- many many images -->
</span>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
JS: live demo >
$("button.red").click(function(){
$(".images-red").show();
$(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
$(".images-red, .images-pink").hide();
$(".images-blue").show();
});
$("button.pink").click(function(){
$(".images-red, .images-blue").hide();
$(".images-pink").show();
});
Please suggest for short and simple code of my script. Thanks.
You can do it by adding just a common class to those buttons,
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().eq($(this).index("button.button")).show();
});
The concept behind the code is to bind click event for the buttons by using the common class. Now inside the event handler, hide all the i elements which has been cached already and show the one which has the same index as clicked button.
DEMO
For more details : .eq() and .index(selector)
And if your elements order are not same, both the i and button's. Then you can use the dataset feature of javascript to over come that issue.
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().filter(".images-" + this.dataset.class).show()
});
For implementing this you have to add data attribute to your buttons like,
<button data-class="red" class="button red">Red</button>
DEMO
This works
$("#choose-color button").click(function(){
var _class = $(this).attr('class');
$("#choose-color i").hide();
$(".images-"+_class).show();
});
https://jsfiddle.net/455k1hhh/5/
I know this might not be the prettiest solution, but it should do the job.
$("button").click(function(){
var classname = $(this).attr('class');
$("#choose-color span i").hide();
$(".images-"+classname).show();
});
You're making future extensibility a little difficult this way due to relying on class names but this would solve your immediate need:
<div id="myImages">
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</div>
<div id="myButtons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
$("#myButtons button").click(function(){
var color = $(this).attr("class");
var imageClass = ".images-"+color;
$('#myImages').children("i").each(function () {
$(this).hide();
});
$(imageClass).show();
});
Here's a JSFiddle
Edit: Note how I wrapped the buttons and images in parent divs to allow you to isolate just the buttons/images you want to work with.
You can do the following using data-* attributes, because when you have more elements of the same color, using index of the button won't work. And simply using the whole class attribute won't work if you have to add more classes to the button in future.
$("button").click(function() {
var color = $(this).data('color');
var targets = $('.images-' + color);
targets.show();
$("span i").not(targets).hide();
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
<span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
<br/>
<br/>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="pink">Pink</button>
</div>
It would make sense to have all images share a single class (.image for example). Then you just use a shared class for the button and the image; in this example I used the color name. Now, when any button is clicked, you can grab the class name of the image you want to show.
Give this a try:
$("button").click(function(){
$(".image").hide();
var className = $(this).attr("class");
$("." + className).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
You may try this:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>
</div>
JS: see here
$(".colour").click(function(){
var colors = ["red", "blue", "pink"];
for (i = 0; i < colors.length; i++) {
if($(this).hasClass(colors[i])){
$(".images-"+colors[i]).show();
}else{
$(".images-"+colors[i]).hide();
}
}
});