I want to add a class when clicking on a a tag inside a div.
When clicking on the I want to add the class "show".
I use this HTML:
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
See the JSFiddle: http://jsfiddle.net/8wLze4rf/2/
I edited your fiddle, i think this is what you want to do. On click the class gets added and on another click (anywhere on the page) it gets removed.
$(".liveChatLabel").click(function(){
$(".liveChatContainer").addClass("show");
});
$('html').click(function() {
$(".liveChatContainer.show").removeClass("show");
});
$('.liveChatContainer').click(function(event){
event.stopPropagation();
});
JSFiddle
Add jQuery library.
Use this script:
$(document).ready(function() {
$('.liveChatContainer a').click(function() {
$('.actions a').removeClass('show');
$(this).addClass('show');
return false;
});
});
HTML
<div id="liveChatContainer" class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>
JS
$(document).ready(function(){
$('#liveChatLabel').click(
function(){
$('.actions a').removeClass('show');
$('#liveChatContainer').toggleClass('show');
return false;
});
});
$(document).mouseup(function (e)
{
var container = $("#liveChatContainer");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
JSFiddle
I've used toggle to add and remove the class, here's a fiddle of it:
http://jsfiddle.net/8wLze4rf/8/
$(document).ready(function(){
var button = $('.liveChatContainer');
button.on("click",function(){
button.toggleClass('show');
});
});
$(document).click(function(e) {
$('.liveChatContainer').removeClass('show');
});
$('.liveChatContainer a').click(function(e) {
$('.liveChatContainer').addClass('show');
e.stopPropagation();
});
$('.liveChatContainer').click(function(e) {
e.stopPropagation();
});
.show {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
use setAttribute("class","actions"); to your link in java script
Related
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>
how to delete element when press on delete button?
but what happened here when i press any where in div the div will delete
i am trying to delete using button only
<script>
function myexfun(mySelectID, selectedItem, myDIVId) {
var x = document.getElementById(mySelectID).value;
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">' + x + '</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm()" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
// bd.style.display = "block";
}
</script>
<script>
function delelm() {
$(document).on("click", '#childcur', function() {
$(this).remove();
});
}
</script>
i tried alot but i can not delete it from button just click on div
Your click event listener is attached to the entire div, which is why it deletes whenever you click anywhere inside the div. Since you have delelm(), you can modify the code as below to confine the click to just the delete button alone.
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">1</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm(this)" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
function delelm(el) {
$(el).closest('#childcur').remove();
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="parentcur"></div>
Your problem is that you're targeting clicks on the #childcur div and not it's children.
Here's an example of how this could be done:
HTML:
<div id="container">
<div class="deletable">
<p>A</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>B</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>C</p>
<button class="do-delete">Delete</button>
</div>
</div>
JS:
// target buttons within the divs we want to be deletable.
$('div.deletable > button.do-delete').on('click', function() {
// when the button is clicked, access the parent and remove it from the DOM.
$(this).parent().remove();
})
Here's a fiddle: https://jsfiddle.net/7aro46et/
I have a jQuery slider that when clicked, will fire the else before the if. I am not to sure why this is doing this. I need it so when the element is
If any one knows how to fix this, that would be great!
<div class="sidebar-mob" onclick="sidebarPull()">
<i class="fas fa-angle-right"></i>
</div>
function sidebarPull(element) {
if ($(element).data('clicked')) {
$(".content").css("margin-left", "100%");
$(".sidebar").css("margin-left", "-7%");
$(".sidebar-mob i").css("transform", "180deg")
console.log("if-clicked");
$(element).data('clicked', false)
} else {
$(".content").css("margin-left", "0%");
$(".sidebar").css("margin-left", "-100%");
$(".sidebar-mob i").css("transform", "180deg")
$(element).data('clicked', true)
console.log("else-clicked");
}
};
You are not passing the element argument in to the function. Add this to the function call:
<div class="sidebar-mob" onclick="sidebarPull(this)">
<i class="fas fa-angle-right"></i>
</div>
That being said, you can tidy this up a lot by using unobtrusive event handlers. Inline event handlers are outdated and should be avoided where possible. Try this:
<div class="sidebar-mob">
<i class="fas fa-angle-right"></i>
</div>
$(function() {
$('.sidebar-mob').click(function() {
var $el = $(this);
var clicked = $el.data('clicked');
$(".content").css("margin-left", clicked ? "100%" : '0%');
$(".sidebar").css("margin-left", clicked ? "-7%" : '-100%');
$(".sidebar-mob i").css("transform", "180deg")
$el.data('clicked', !clicked)
});
});
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
hi guys I am doing a toggle effect in my page, but i got error when i move the button close for other part of the page. If the button is in a part of html works if are for example in other div the button does not work.can you guy figure out what is going on? also can u say if that my jquery is clean? or need to be improved?
html:
<a href="#menu-toggle" class="btn btn-sidebar-close" id="close">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
js:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
An improvement could be:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
in a single function as they're both containing the same functionality:
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
You forgot to close quote after "tooltip" here :
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
Otherwise, your code is working :
See this Fiddle