We Keep Coding

Edit button jquery function

How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input
Thanks in advance
<header data-role="header">
<h1>To Do List</h1>
Home
</header>
<div role="main" class="todo- container">
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<button id="addButton">Add</button>
</div>
<ul class="todo-list">
<li>
<div class="button-center">
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
});
$('#editButton').click(function() {});
</script>

I have done something like this : example
user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.
JS
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div
class="button-center"><button class="deleteButton">Delete</button><button
class="editButton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
$(document).on('dblclick', '.task', function() {
var task = $(this).text();
$(this).text('');
$(this).append(`<input type="text" value="${task}" />`);
});
$(document).on('click', '.editButton', function() {
var task = $(this).parents().siblings('span').children('input').val();
$(this).parents().siblings('span').remove('input');
$(this).parents().siblings('span').text(task);
});

I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this
$(document).ready(function() {
var $note = $('.note');
var $taskId = $('.task-id');
$('#addButton').click(function() {
var task = $note.val().trim();
var id = $taskId.val();
if( task.trim() === '' ){
// do nothing
}else if( id !== '' ){ // edit
$(".todo-list").find('[data-id="'+id+'"] .task').text(task);
}else{ // add todo
id = new Date().getTime(); // you can make it more unique
$(".todo-list").append(`
<li data-id="${id}">
<span class="task">${task}</span>
<div class="button-center">
<button class="deleteButton">Delete</button>
<button class="editButton">Edit</button>
</div>
</li>
`);
}
$note.val('').focus();
$taskId.val('');
$(this).text('Add');
});
// delete and edit action
$(document).on('click', '.deleteButton', function() {
$(this).closest('li').remove();
}).on('click', '.editButton', function(){
let $li = $(this).closest('li');
$note.val( $li.find('.task').text() );
$taskId.val( $li.data('id') );
$('#addButton').text('Update');
});
// cancel update if .note text is cleared
$('.note').on('input', function(){
if( $(this).val() === '' ){
$taskId.val('').focus();
$('#addButton').text('Add');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<input type="hidden" class="task-id">
<button id="addButton">Add</button>
</div>
<ul class="todo-list"></ul>

Add/Remove CSS class on search input with jQuery

I have a search field and I have it so that when you click on the search icon, a class is added with a grey underline. My problem is that I cannot remove the class when I click outside of the search field.
Does anyone know how I can get the grey-line class to be removed when a user clicks outside the search field?
There is a lot going on so here is my javascript that handles this:
//Header Search Handler
function headerSearchHandler() {
var $searchInput = $(".header-search input[type=text]"),
$searchSubmit = $(".header-search input[type=submit]"),
$mobSearchBtn = $(".mobile-search-btn"),
$myAccountText = $(".menu-utility-user .account-text"),
$miniCart = $("#header #mini-cart"),
$searchForm = $(".header-search form"),
$headerPromo = $(".header-promo-area");
//
$mobSearchBtn.on("click touchend", function(e) {
$(this).hide();
//$myAccountText.hide();
$searchInput.show();
$searchInput.addClass('grey-line');
$searchSubmit.show();
$miniCart.addClass("search-open");
$searchForm.addClass("search-open");
setTimeout(function() {
$searchInput.addClass("active").focus();
}, 500);
e.stopPropogation();
});
$searchInput.on("click touchend", function(e) {
$searchInput.addClass('grey-line');
e.stopPropogation();
}).blur(function(e) {
var $this = $(this);
if ($this.hasClass("active")) {
$this.removeClass("active");
$searchSubmit.hide();
$mobSearchBtn.show();
$miniCart.removeClass("search-open");
$searchForm.removeClass("search-open");
}
});
$('body').on("click", function(e) {
if ($searchInput.hasClass('grey-line')) {
$searchInput.removeClass('grey-line');
e.stopPropogation();
}
});
} //End Header Search Handler
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="search" role="search" onsubmit="return checkForm()" action="${searchPage}" method="get" name="simpleSearch">
<fieldset>
<legend aria-hidden="true" class="visually-hidden">${Resource.msg('simplesearch.searchCatalog', 'search', null)}</legend>
<button class="mobile-search-btn" for="q" aria-hidden="false" aria-expanded="false" aria-controls="q" tabindex="0" aria-label="show search field button tap twice to open search input field">${Resource.msg('simplesearch.searchlabel', 'search', null)}</button>
<input tabindex="0" type="text" id="q" name="q" value="" class="searchField" placeholder="${Resource.msg('simplesearch.searchtext', 'search', null)}" style="font-style:normal;" unbxdattr="sq" />
<input tabindex="0" type="submit" name="go" value="${Resource.msg('simplesearch.searchtext', 'search', null)}" unbxdattr="sq_bt" />
</fieldset>
</form>

Try using blur.
$('.searchFieldClass').blur(function() {
$(this).removeClass('.greyLineClass');
});

how to display the array of values for the single field using jquery?

Here I need to get all the values entered in the input field. But it echoes only the first value.
ie. When I press the + and give some values, I need to get that value too.
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
$(this).closest('.add1').after(clone);
});
$(document).on("click", ".remove", function() {
$(this).parent(".add1").remove();
});
});
$('#package').change(function() {
var arr = [];
$("input.packageclass").each(function() {
arr.push($(this).val());
alert(arr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
<h6>Sales Package </h6>
<div>
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<input type="submit" value="+" class="add"></div>
</div>

$('.package').change(function() {
You are using an ID in your input type="text". IDs are only used once. If you want to add the listener to all of your textfields use classes.
In addition to that the .change(function() is only once called, when the dom is ready. That will be a problem too. So the change listener is not added to the generated textfields. Maybe you use something like...
$('.package').on('change', 'input', function() {
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
<h6>Sales Package </h6>
<div>
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<input type="submit" value="+" class="add">
</div>
</div>
<script type="text/javascript">
var addInput = function(e) {
var arr = [];
$("input.packageclass").each(function() {
arr.push($(this).val());
});
alert(arr);
};
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input class="packageclass" type="text" name="selprice" /><input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
$(this).closest('.add1').after(clone);
$('.packageclass').unbind().bind('change', addInput);
});
$(document).on("click", ".remove", function() {
$(this).parent(".add1").remove();
});
});
$('.packageclass').unbind().bind('change', addInput);
</script>

Just using loop you can get the particular value from loop.
for (var i = arr.length - 1; i >= 0; i--) {
arr[i];
//work with arr[]
}

I have used event delegation to capture the events and take appropriate action.
In this, you can add a event listener to your parent element i.e., click to the .body in my case. When I click on the .add button, the event propagates and .body click handler gets invoked. By checking for event.target we can find out the origin of event and add or remove the divs.
Similary we can listen for the change event of the input boxes and take appropriate actions.
$('#body').click(function(e) {
if(e.target.className === 'add') {
$('#body').append(`
<div class="add1">
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<button class="add">+</button>
<button class="remove">-</button>
</div>
`);
}
if(e.target.className === 'remove') {
$(e.target).parent().empty();
}
});
$('#body').change(function(e) {
console.log(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="body">
<h6>Sales Package </h6>
<div class="add1">
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<button class="add">+</button>
</div>
</div>

Just add class="packageclass" to the input when creating your clone variable.
https://jsfiddle.net/289xvmu7/
var clone = '<div class="add1"><input type="text" name="selprice" class="packageclass"/> <input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';

How i append div in jquery and delete div except first div

I want to append div on click add more and remove that div according to my code
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
});
});
this is my code it works perfect but i want to not delete first div and remove delete button my html code is
<div id="appendbox">
<div class="add-skils-form">
<div class="skill-a">
<input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
</div>
<div class="skill-b">
<select id="key-skills-select" class="defualt-select default-size">
<option value="3">Advanced</option>
<option value="2">Intermediate</option>
<option value="1" selected>Beginner</option>
</select>
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
how could i do please suggest me

Try with this.
$(document).ready(function() {
deleteRow();
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
$('.delete-row').show();
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
deleteRow();
});
function deleteRow(){
if($('.add-skils-form').length == 1){
$('.delete-row').first().hide();
}
}
});

Another Solution
Check here https://fiddle.jshell.net/o2f0kskf/1/
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest(".add-skils-form").not(":first-child").remove();
});
});

Cannot remove appended elements with jQuery

I created a simple multi-text input with jQuery, appending text fields working fine. But, struggling to remove them. I googled, checked past questions but, don't know how to match them to my code.
Here is my code
$(document).ready(function () {
var i = 1;
(function () {
$('.dd').on('click', '.addRow', function () {
i = i+1;
var start = $('#fields'),
newRow = $('<input type="text" name="i" class="quantity" /><p class="xx">X</p><br><br>');
$(start).append(newRow);
});
})();
});
HTML
<div class="dd">
<form action="js-more-fields.php" method="get">
<div id="fields">
</div>
<p class="addRow">Add a Row</p>
<input type="submit" id="submit" />
</form>
</div>

Here is working fiddle
$(document).ready(function () {
var i = 1;
(function () {
$('.dd').on('click', '.addRow', function () {
i = i+1;
var start = $('#fields'),
newRow = $('<div id='+i+'><input type="text" name="i" class="quantity"/><span class="delete">X</span></div><br/>');
$(start).append(newRow);
});
$('body').on('click', '.delete', function(e) {
$(this).parent().remove();
});
})();
});
:You are trying to bind click on dynamic created element which does not exist.You can use delegate or on for doing this.

Use JQuery on for dynamically created elements:
api.jquery.com