Delete All Chips At once Jquery and css - javascript

I am using CSS chips for my project. For now its working fine for adding new chips and remove chips one by one. How can I modify my code to remove all existing chips at once?
<div id="basic" class="section scrollspy">
<button class="myBTN">Add New</button>
<button class="myBTN2">Delete All</button>
<div class="input-field">
<div id="Filter" class="chips chips-autocomplete chips-placeholder"></div>
</div>
</div>
$(function() {
var x = 1;
$(".myBTN").on("click",function(e){
var text = $(this).text()+x;
x++;
var e = jQuery.Event("keydown");
e.which = 13; // # Some key code value
$(".chips input").val(text);
$(".chips input").trigger(e);
});
$(".myBTN2").on("click",function(e){
});
$('.chips-placeholder').material_chip({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
});
$('.chips').material_chip();
});
JSFiddle

You can just trigger a click on their close button
$(".myBTN2").on("click",function(e){
$('.chip .close').click();
});
https://jsfiddle.net/2fu3r17d/

You can do it using .remove()
$(".myBTN2").on("click",function(e){
$(".chips .chip").remove();
});
https://jsfiddle.net/zLjg4d0s/

Find div inside customerFilter and remove.
$(".myBTN2").on("click", function(e) {
$('#customerFilter').find('div').remove();
});
Fiddle Link

Just select all .chip divs inside #customerFilter and remove it.
$(".myBTN2").on("click",function(e){
$('#customerFilter .chip').remove();
});

Related

How to replicate function on similar divs with same function

If I have li which contains a function (duplicate on keyup), how can I replicate that same function to a clone of that same li.
this is the element (li, better said), which will be constantly duplicated
<li class="main-item">
<div class="header-item fwidth">
<div>
<h1 class="duplicado fleft"></h1>
</div>
</div>
<div id="internal-items-2" class="collapse collapsible-item">
<div>
<input type="text" value="" class="duplicante nombre-item">
</div>
</div>
</li>
this is the duplicate on keyup function, which produces text on the H1 element according to what is written on the input
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$('.duplicado').text(text);
});
});
How to make that function works for each duplicated li element?
Fiddle example
If I understand correctly, what you want is to updated the individual headers upon keyup.
One way to do it would be like this:
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$(this).closest('li').find('.duplicado').text(text);
});
});
here is the fiddle:
http://jsfiddle.net/s16vds6n/1/

Deleting and restoring divs toggle

I am trying to create a switch between a div being deleted and it being restored based on an Event trigger. I am using jquery. How do i do that using .click event?
Its simple lets say you will have 2 divs.
use this in in JS
$(document).ready(function() {
$("#div1").hide();
$("#div2").hide();
$('#button1').click(function() {
$("#div1").show();
$("#div2").hide();
});
$('#button2').click(function() {
$("#div1").hide();
$("#div2").show();
});
});
And HTML
<button id="button1" >Show Div1 </button>
<button id="button2" >Show Div2 </button>
<br><br>
<div id="div1" ><h1> Hello </h1></div>
<div id="div2" > <h1> Bye </h1></div>
See a live example here: http://jsfiddle.net/ptqdrr8t/1/
You can find a div and use it with jQuery to move it and also change the styling/content/classnames etc. But it's not always best for performance, you can also consider to show/hide the div instead as was suggested earlier.
An example here:
http://jsfiddle.net/web_nfo/57x4agL7/
Html:
<div id="removedItems"></div>
<div class="item">
<h3>Item1</h3>
<span class="remove">Remove</span>
</div>
jQuery:
$(document).ready(function(){
$('.item span.remove').click(function(){
// Find the item
var $item = $(this).parent();
// You can change the original item
$item
.addClass('removed')
.find('h3').append('<span>[removed]</span>');
// Move the item
$('#removedItems').append( $item );
});
});
Or if you are looking for another way (to really 'remove' the item first) you can store the whole $item object in an array, and use it later on to re-create something. Maybe something like this?
var history = [];
$('.item span.remove').click(function{
var $item = $(this);
history.push( $item );
$item.remove();
});
If you are creating an 'undo' function you also have to remember the position of the item (before it was removed) to put it back at the correct spot.

How to add event on all label in nested div in angular or jquery

i want to add event all label in html.in my code just event occur on first label. how to solve it?
here is sample of my code:
<div id="accordion">
<label class="label">{{}}</label> // just this label event run
<div>
</div>
<div ng-repeat="l in list" class="loop">
<div ng-if="" class="if">
<label class="label">{{}}</label>
<div class="div">
<p> {{}}</p>
</div>
</div>
</div>
</div>
and my jquery code is
$(".label").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion .div').slideUp(300);
}
$(this).next().slideToggle(300);
});
use below code . instead of '.label' use tag name 'label'. it will assign all 'label' tag click event using jquery . see working fiddle
$(document).on('click',"label",function(){
if(false == $(this).next().is(':visible')) {
$('#accordion .div').slideUp(300);
}
$(this).next().slideToggle(300);
});
You can add events to all labels presents in the HTML, by selecting the label like : -
$('label').on('click', (function(){
//do something
}))

Jquery dynamic creating HTML divs on click

I’m looking for some direction for my problem.
I’ve HTML divs and I want to replicate it when user clicks on span with id plus-1.
This is my html
<div id = “tab”>
<div class="row">
<div>
<select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
<option value="1">Project Presentation</option>
<option selected="selected" value="4">Project Root</option>
</select>
</div>
<div>
<div>
<input type="text" required="required" id="ProjectsFolder0Linux" value="xyz" name="data[ProjectsFolder][0][linux]">
</div>
</div>
<div id="plus-1" >
<span>
Click here
</span>
</div>
</div>
</div>
Jquery
$(document).on('click', '#plus-1' , function() {
var html = "<div class=\"row\" >"
???
+ "</div>";
$('#tab').append(html);
});
It is appending above html defined in jquery , but I don’t know how to append entire HTML efficiently as required above on each click.
Demo FIDDLE
Jquery
$(document).on('click', '#plus-1' , function() {
var html = $(this).parent().clone();
html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
$('#tab').append(html);
});
Made a jsfiddle for you - http://jsfiddle.net/23GCn/. You also have an error in your html, you need to use correct parenthesis on <div id="tab">
jQuery(function($){
var count = 1;
$(document).on("click", "[id^='plus']", function(){
newBlock = $(this).parents(".row").clone();
count += 1;
// change id of Plus button
newBlock.find("[id^='plus']").attr("id", "plus-"+count);
// Change id and name of select box
newBlock.find("select")
.attr("id", "ProjectsFolder"+count+"FolderId")
.attr("name", "data[ProjectsFolder]["+count+"][folder_id]");
// Same for input
newBlock.find("input[type='text']")
.attr("id", "ProjectsFolder"+count+"Linux")
.attr("name", "data[ProjectsFolder]["+count+"][linux]");
// append new element to your tab
$("#tab").append(newBlock);
});
});
Note that [id^='plus'] type selectors are very inefficient, means, slow. Consider using classes instead of ids, this way you avoid all of the code required to change ids, since you can't have elements with same id on your page obviously.

How to get a specific elements text with a generic tag

Using the following html
<div class="span4">
<h3>Someones Name</h3>
<p><a class=btn href="">Bio</a></p>
</div>
is it possible using Jquery/javascript , that when the user clicks button the text in above the button can be returned. Is it possible to only return the h3 above the button if the page has many instances of this pattern of html? The only difference between each block is that Somes Name changes.
for instance
<div class="span4">
<h3>Name1</h3>
<p><a class=btn href="">Bio</a></p>
</div>
<div class="span4">
<h3>Name2</h3>
<p><a class=btn href="">Bio</a></p>
</div>
It would be nice if each btn click/bound event would only return Name1 and Name2 respectively.
Use closest to get to the parent .span4 and then find the h3.
$('.btn').on('click', function (e) {
e.preventDefault();// to prevent the default behavior of anchor a click from redirecting.
alert($(this).closest('.span4').find('h3').text());
});
Demo
do you mean something like:
$("a.btn").click(function(e) {
e.preventDefault();
var h3text = $(this).parents(".span4").find("h3").text();
alert(h3text);
});
Demo:: jsFiddle
Try this(jQuery version):
$('.btn').on('click', function(e) {
e.preventDefault();
var $h3 = $(this).parent().prev();
alert($h3.text());
return false;
});
Fiddle

Categories

Resources