JQuery : how to click delete button then click on item to remove - javascript

Currently I'm using JQuery to spawn items into a HTML canvas to drag around and create visio style kind of drawings. The problem I'm having trouble figuring out is how to remove these items. Now I know I can use the .remove or the .click but the functionality I want is like this:
I want the user to click on the delete button then click on the item on the canvas they wish to remove that they created earlier. I'm not sure how to track the fact that the delete button has been clicked so when they click on the item they want to remove it can send the .remove to remove it from the canvas.
I have seen lots of examples of a delete button next to a table or element so you can remove it once the button is clicked but I want a global delete button at the button of the screen that can be clicked then the user can click on the item anywhere on the canvas to be removed.
Any help would be greatly appreciated.

Basically you want to set a flag whenever the delete button is highlighted and look at that flag whenever the user clicks the element.
Here I am setting a class on the button. If the button has the specified class then the element should be deleted -
$(document).ready(function() {
$("#delete").click(function() {
$(this).toggleClass("deleting");
});
$("div").click(function() {
if ($("#delete").hasClass("deleting"))
$(this).remove();
});
});
button.deleting {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Text1</div>
<div>Test2</div>
<div>Test3</div>
<button id="delete">Delete</button>

You could assign a class to each of the elements that the user can remove.
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG1&w=100&h=100" class="elements" />
Upon selecting(clicking) on the element remove the active class from all of the existing elements and assign the active class to the current item.
$('.elements').click(function () {
$('.elements.active').removeClass('active');
$(this).addClass('active');
});
Then upon delete button click. Remove the element with the active class.
$('#deleteElement').click(function () {
$('.elements.active').remove();
})
Example here:
http://jsfiddle.net/SeanWessell/4emomnqe/

Related

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks
You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

JQuery is delayed of one event to retrieve DOM object using `click` event handler

I have two questions on my webapp which are both radio input type but take the appearance and some properties of bootstrap buttons.
At each click I want to check which are the selected two button on the page.
When I click on a label, the tag label receives the class .active (from bootstrap framework I guess). I want to use it to filter which are the selected two buttons at every click of the user.
The problem is that if I click on Option 1, at first click, the button gets active but jQuery can't retrieve the element.
Then If I reclick on option 1 or option2, it will then properly find the element option 1 (even if I clicked on 2).
There is a one step delay between the option I click and what jQuery find.
Here is the JS
Note: I also tried by filtering on the class checked of input tag and observe the exact same behavior
$(function() {
$("label.btn").click(function() {
console.log($("label.active").children()[0].id);
});
})
And here is the pug that generate the HTML
.btn-group(data-toggle='buttons')
label.btn.btn-primary
input#option1(type='radio', name='lorem')
|Option 1
label.btn.btn-primary
...
NOTE :
Waiting for the answer to be edited... the solution is to replace click by change
Probably related to order that the event listeners are added. They will get executed in the order they are added to element.
Try adding small delay.
Example
$('button').click(function(){
var $btn = $(this)
console.log('Has class when clicked = ', $btn.hasClass('active'));
setTimeout(function(){
console.log('Has class after small delay = ', $btn.hasClass('active'));
},20);
}).click(function(){
// will add class after first click handler is fired
$(this).addClass('active')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Scrolling through list elements doesn't start on first click

I am working on a script that will scroll through list elements by clicking on a "previous" and "next" link. When the user first clicks on the "next" button, they have to click twice before the second list element is displayed. The "previous" link works just fine but how can fix my script to where the user only has to click once on the "next" button?
http://jsfiddle.net/S79qp/290/
Simply put active on the first element by default.
<li class="first active none">Ferrari</li>
The problem is that on the first click on "next", there is no element with the class .active, consequently $('.active') won't find anything and $('.active').next().length will be 0, so the first element will be given the class .active.
The solution add the class .active to the first element that is initially shown, which will make the class .first obsolete: http://jsfiddle.net/hx4AD/

Categories