Develop Reference

Delete All Chips At once Jquery and css

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();
});

Evaluating an element that isn't in focus

I need to evaluate the contents of a hidden input field, who's value changes depending on the contents of an unordered list. For reference, this input field is part of a Tag-it! Single Input Field(2) assembly.
The problem with evaluating this sort of field is that onchange does not seem to fire on the input element, because the element is not in focus. That means I have two possible directions:
Figure out how to make the onchange event fire when the element isn't in focus;
Evaluate the contents of the unordered list.
The latter of these options seems the most appropriate, however it might also be heavy and possibly inaccurate. Which of these approaches should I be going for?
HTML:
<div id="Likes">
<div class="form-modal-back">
<div class="form-modal-title">
<h4>Choose some things you like</h4>
</div>
<div class="form-modal-main">
<h5>Start by typing a few letters, and choose from the suggestions</h5>
<div class="gap20"></div>
<div class="tagBox">
<input id="likesTags" name="tags" />
</div>
...
<a href="#Dislikes">
<input class="form-modal-button-right hiddenLink" id="onb5" type="button" value="Next" />
</a>
...
HTML at runtime:
<input id="likesTags" name="tags" class="tagit-hidden-field">
<ul class="tagit ui-widget ui-widget-content ui-corner-all">
<li class="tagit-new">
<input class="ui-widget-content ui-autocomplete-input" autocomplete="off" type="text">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">1 result is available, use up and down arrow keys to navigate.</span>
</li>
</ul>
JS:
$("#likesTags").onchange(function () {
var text = $("#likesTags").val();
if (text.length > 2)
{
pageCompletionSequence += "1";
checkCompletion("#onb5", "#Dislikes", "11");
}
else
{
pageCompletionSequence = "1";
elementRestore("#onb5");
}
})
function checkCompletion(id, np, seq) {
if (pageCompletionSequence == seq) {
$(id).removeClass("hiddenLink");
$(id).parent().attr("href", np);
pageCompletionSequence = "1";
}
}
function elementRestore(id) {
$(id).addClass("hiddenLink");
$(id).parent().removeAttr("href");
}

This plugin has event callbacks for this case.
$("#likesTags").tagit({
//This should be appended to your current tagit initializing call.
afterTagAdded: function() {
onTagsUpdated('#likesTags');
},
afterTagRemoved: function() {
onTagsUpdated('#likesTags');
}
});
function onTagsUpdated(id){
var tags = $(id).tagit("assignedTags"); //Returns an array of the text values of all the tags currently in the widget.
console.log('tags of',id,'updated:',tags);
}

DataTables search on button click instead of typing in input

I would to know if it is possible to move the search function out of an input for a table modified by DataTables. Currently I have a custom input that executes this function:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
the input looks like so:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
What I would like to do is move this to a button. What I thought might be possible is the following:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
with the button looking like so:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
however when I click on the button this does not work. In typing this question I have realised that this is probably because when I click the button, it does not know where to get the filter text from to actually filter the table.
Is there a way I can have a button click that references the input, that then goes and filters the table?

You're right, you need to redefine $(this), which now refers to the button, not the search box:
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($("#searchNameField").val()).draw();
});
// EDIT: Capture enter press as well
$("#searchNameField").keypress(function(e) {
// You can use $(this) here, since this once again refers to your text input
if(e.which === 13) {
e.preventDefault(); // Prevent form submit
oTable.search($(this).val()).draw();
}
});
});

Jquery events not working with elements from append() [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Currently, I am creating something that will simply allow me to create tasks, click them when they are done and swipe left to get rid of them.
The problem I am having is that when the new tasks are appended, they are not affected by any of the JQuery events on in the script.
Tl;dr: appended divs are not affected by the below javascript, how can I fix this issue?
<div class="app">
<div class="appHeader">
<h2>Tasks</h2>
<form class="createTask">
<input type="text" class="createTaskInput" size="10" maxlength="25" placeholder="Type here to create your task..." //>
</form>
</div>
<div class="task">
<div class="summary">This is an example task
<br>When you complete a task, click the red button
<br>Should you want to remove a task, swipe left on the task.
</div>
<div class="completion"></div>
</div>
</div>
<script>
$(".completion").on({
'touchstart': function() {
$(this).addClass("completed")
}
});
$(document).ready(function() {
$("div.task").on("swipeleft", swipeleftHandler);
function swipeleftHandler(event) {
$(event.target).addClass("swipeleft");
}
});
$(document).ready(function() {
$(".createTask").submit(function(e) {
var value = $(".createTaskInput").val();
$('.app').append('<div class="task"><div class="summary">' +
value + '</div><div class="completion"></div></div>')
e.preventDefault();
});
});
</script>

That is because you add the event listener before you add the objects.
A workaround is to add the event listener to the body like this.
$( "body" ).on( "swipeleft", "div.task", swipeleftHandler );
and
$(" body ").on( "touchstart", ".completion", function(){
$(this).addClass("completed")
});

Because you are not binding them after you add a new task see below
function swipeleftHandler(event) {
$(event.target).addClass("swipeleft");
}
function touchHandler(event) {
$(event.target).addClass("completed");
}
$(document).ready(function() {
$(".completion").on('touchstart', touchHandler);
$("div.task").on("swipeleft", swipeleftHandler);
$(".createTask").submit(function(e) {
var value = $(".createTaskInput").val();
var totalExisting = $('div.task').length;
$('.app').append('<div class="task"><div class="summary">' + value + '</div><div class="completion"></div></div>');
var newTask = $('div.task').eq(totalExisting);
newTask
.on("swipeleft", swipeleftHandler)
.on('touchstart', touchHandler);
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="appHeader">
<h2>Tasks</h2>
<form class="createTask">
<input type="text" class="createTaskInput" size="10" maxlength="25" placeholder="Type here to create your task..." //>
</form>
</div>
<div class="task">
<div class="summary">This is an example task
<br>When you complete a task, click the red button
<br>Should you want to remove a task, swipe left on the task.
</div>
<div class="completion"></div>
</div>
</div>

Clone inline form fields and append to parent container

I have the following form fields:
<div id="filename-url-container">
<div class="form-inline form-group">
<input name="filename[]" class="form-control" placeholder="Filename" type="text">
<div class="input-group">
<input name="url[]" class="form-control" placeholder="URL" type="text">
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
I want to grab the first child each time the button is pressed and append it to the bottom of the filename-url-container div without the values of the original cloned fields.
I tried to get this to work but it's not appending correctly:
$('#filename-url-container').on('click', '.btn-add', function (e) {
e.preventDefault();
var formGroup= $('#filename-url-container :first-child');
$('#filename-url-container').append(formGroup);
console.log(controlForm);
});

You should .clone the elements before appending them - as written your code would simply take the existing elements and try to move them to exactly the same place.
You also need to constrain your selector, else it will pick every :first-child element within the container, not just the one that's the immediate child:
$('#filename-url-container').on('click', '.btn-add', function (e) {
var formGroup= $('#filename-url-container > :first-child').clone(true);
formGroup.find('input').val(''); // erase values
$('#filename-url-container').append(formGroup);
});
demo at http://jsfiddle.net/alnitak/dvqgnga0/

$('#filename-url-container').on('click', '.btn-add', function (e) {
e.preventDefault();
var formGroup= $('#filename-url-container div:first-child').html();
$('#filename-url-container').append(formGroup);
console.log(formGroup);
});
You need to append html, not object it self.
http://jsfiddle.net/npdh2v3L/

I don't think you are using :first-child correctly. :first-child refers to the first child of the type to it's left. Other than that you just need to get rid of those values. Additionally, I'm not seeing a need to Event.preventDefault() since you are not using a submit button.
$('#filename-url-container .btn-add').click(function(){
var clone = $('#filename-url-container .form-group:first-child').clone(true);
clone.find('input').val('');
$('#filename-url-container').append(clone);
});