i have a single filed which i need to clone with a clone button and remove button to remove the cloned filed only
i made this simple script but i believe it contain something wrong since its not working :)
HTML
<form method="post">
<div id="fileds">
<select name="lang" id='lang'>
<option>select language</option>
</select>
</div>
</form>
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
JS
$(function(){
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $("#lang").length;
$("button.clone").live("click", function(){
$(this).parents("#lang").clone()
.appendTo(".fileds")
.attr("id", "lang" + cloneIndex)
.find("*").each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
});
cloneIndex++;
});
});
also i didn't find how to write the remove code for the remove button
Thank you
1) The #lang is not a parent of .clone
2) .fields should be #field as this is and ID
This code should work. Live Demo
$(function() {
var counter = 1;
$(".clone").live("click", function() {
$("#lang:first").clone().appendTo("#fileds").addClass("lang" + counter);
counter++
});
$(".remove").live('click', function() {
if (counter > 1) { //Only apply if the lang field is more than 1
counter = counter - 1;
$("#lang:last").remove();
}
});
});
the lang is not parent of the buttons, i have added a class and a handler for remove button, try this:
$(function(){
$(".clone").on("click", function() { // you can use `on` instead of live which is deprecated
var cloneIndex = $(".lang").length; // you can find the the current length of `.lang` within the handler
$(".lang:last").clone() // clones the last element with class of `lang`
.attr("id", "lang" + cloneIndex)
.appendTo("#fileds") // change this to id selector
});
$("button.remove").on("click", function(){ // '.remove' click handler
$(".lang:last").remove()
})
});
DEMO
Related
I have an ordered list in HTML:
<ol id ="list">
</ol>
which gets added to using JQuery/javascript:
$(function (){
$("#click-me").click(function (e){
e.preventDefault();
i++;
var list = $("#list");
var name = $("#colleague-select option:selected").text();
var remove = "<button type='button' class='remove-me'> X </button>";
var entry = "<li>" + name + remove+ "</li>";
entry.id = "entryid" + i;
list.append(entry);
return false;
});
});
What I'm trying to do is to allow a user to remove an entry in the list by clicking its corresponding button "X". This is the code I've come up with, but it's not working:
$(function (){
$(".remove-me").click(function(e){
var list = $("#list");
var entry = e.parent(); //find parent entry of clicked "X" button
list.remove(entry); //remove entry from list
});
});
Any help guys? I am fairly new to JQuery so an explanation of your answer code would be much appreciated. Thanks.
You need to use event delegation for binding events to dynamically added elements.
$(document).on('click', ".remove-me", function(e){
var entry = $(this).parent();
entry.remove(); //remove entry from list
});
just remove the parent element
$(function (){
$(document).on("click", ".remove-me", function(e){
$(this).parent().remove(); //find parent entry of clicked "X" button
});
});
A foolproof way is add the event to the button
<button type='button' onclick='removeMe(this);' class='remove-me'> X </button>
and on js
function removeMe(e)
{
$(e).parent().remove();
}
can I get some help on finding a solution on how to remove a single li when using local storage? this is todo list type functionality.
i am able to select & remove "this" item, however, on page/browser refresh the entire ul removes.
what I am trying to do is have only the selected item(s) remove, even if the page/browser does refresh.
i believe the list[i] may be my issue, but what other way could i select $(this) from within localStorage?
<h1>simple todo</h1>
<form id="form">
<input type="text" placeholder="Add New...">
<button>Add Item</button>
</form>
<ul id="list"></ul>
<script>
//add
$("button").on("click", function() {
var $item = $("input").val();
$("ul").append("<li>" + $item + "</li>");
//set
$('#form')[0].reset();
var list = $('#list').html();
localStorage.setItem('list', list);
return false;
});
//show
if(localStorage.getItem('list')) {
$('#list').html(localStorage.getItem('list'));
}
//remove
$("ul").on("click", "li", function() {
$(this).css("color", "gray");
var i = $(this).val();
localStorage.removeItem(list[i]);
localStorage.clear();
});
</script>
Change your removing method like this
//remove
$("ul").on("click", "li", function () {
$(this).css("color", "gray");
var i = $(this).text();
var currentList = localStorage.getItem('list'); // get the current list as a string.
var newList = currentList.replace('<li>' + i + '</li>', ''); // replace the clicked item with a blank string. But if you have multiple tasks with the same name this will cause deleting the first occurrence of it.
localStorage.setItem('list', newList); // update the localStorage with the new list
});
i have a standart html label with value:
<label id="telefon" value="101"></label>
i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").
how can i do such a tricky thing?
i tried it with JQuery function, but it really dont wont to work:
$(function() {
$('a.edit').on("click", function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
http://jsfiddle.net/jasuC/ , Since you didnt provide the markup, take a look into this working example
$(document).on("click", "label.mytxt", function () {
var txt = $(".mytxt").text();
$(".mytxt").replaceWith("<input class='mytxt'/>");
$(".mytxt").val(txt);
});
$(document).on("blur", "input.mytxt", function () {
var txt = $(this).val();
$(this).replaceWith("<label class='mytxt'></label>");
$(".mytxt").text(txt);
});
You don't need the jquery.
To made almost all tag elements editable set the contentEditable to true.
So, you can change using the default features of a HTML.
// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)
// HTML
<form id="myform">
<label style="background-color:#eee" title="101">Value is 101<label>
</form>
// JS
$(function(){
$('#myform').on('click',function(e){
var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
if($label.is('label')){
if( !$editorInput.length){
$editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
}
$editorInput.css('display','inline-block')
.data('editingLabel', $label.get(0))
.focus()
.keydown(function(e){
var $l = $($(this).data('editingLabel')), $t = $(this);
if(e.which == 13){
$l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
.text('value is now ' + $l.attr('title'));
// UPDATE YOUR DATABASE HERE
$t.off('keydown').css('display','none');
return false;
}
});
}
});
});
// A bit of CSS
#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}
I'm trying to make a filter on screen, by just hiding what doesn't meet the requirements.
This what I've come up with so far. I'm not sure what I am doing wrong.
jQuery :
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
//for each h4
$('h4').each(function(){
var h4id = $(this).attr('id');
if ($(h4id).contains(search))
$(this).show();
else
$(this).hide
});
HTML :
<input type="search" name="search" id="searchBox"/>
<h4 id="Adminstrator">Administrator</h4>
<h4 id="John,Smith">John Smith</h4>
<h4 id="Jane,Smith">Jane Smith</h4>
(I'm using jQuery 1.9.1)
(So, if I start typing Smith, "Administrator" h4 should disappear.
.contains will not give you the text content of the selector. It will only search for elements inside the selector.
Try this approach .. This can be lot more optimized
jQuery('#searchBox').on('keyup change', function () {
var search = $('#searchBox').val().toLowerCase();
$('h4').hide();
$('h4').each(function () {
var h4id = $(this).attr('id'),
$text = $('#'+ h4id).text().toLowerCase();
if($text.indexOf(search) > -1)
$(this).show();
});
});
Make sure your id's are unique.
Next is your id's should not contain , in them
JSFIDDLE
Try this:-
Simple one, but case sensitive though
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
$('h4').hide();
$('h4[id*='+ search + ']').show();
});
See if this helps. I won't use id for storing the string comparison since name can be same for multiple people and you might end up having multiple h4s with same id. SO i am using data-attribute and jquery data here.
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
$('h4').hide().filter(function(_,oj){
return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1;
//if your are trying to match the text() then do
//return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1;
}).show();
});
Fixing your code would mean this. There is no contains function and couple of other typos.
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
//for each h4
$('h4').each(function(){
var h4id = this.id;
if (h4id.indexOf(search) > -1)
//if your are trying to match the text() then do
//if ($('#'+h4id).text().indexOf(search) > -1)
$(this).show();
else
$(this).hide();
});
});
Try a regex based solution
jQuery('#searchBox').on('keyup change', function() {
var search = $(this).val();
var regex = new RegExp(search, 'i');
//for each h4
$('h4').hide().filter(function(){
return regex.test(this.id)
}).show();
});
Demo: Fiddle
Just using jQuery attribute selector,see here,just two line code will be enough.
Demo:
//for each h4
var h4id = $(this).attr('id');
$("h4").hide().filter("[id*=" + h4id + "]").show();
I have this code:
$('.update-title')
.change(function () {
$(this).prop('title', $('option:selected', this).prop('title'));
});
and this HTML:
<select id="modal_TempRowKey_14" class="update-grid update-title">
...
...
</select>
<input id="modal_Title_14" class="update-grid" type="text" value="xx">
Is it possible for me to make it so that when the .update-title changes
then the value of the title is put into the input id with the matching number.
So in this case the #modal_TempRowKey_14 title would go into #modal_Title_14 value
Important
I want this to happen only if the element being changed starts with modal_TempRowKey. Is this possible to put into the change block?
Try
$('.update-title').on("change", function() {
var id = this.id.replace('modal_TempRowKey_', '');
$("#modal_Title_" + id).val( $(this).val() );
});
My suggestion, rather than trying to parse id attributes, is to make use of jQuery's data function.
Edit your HTML so that the select menu has a data-target attribute:
<select id="modal_TempRowKey_14" data-target="#modal_Title_14" class="update-grid update-title">
...
...
</select>
Then, create your event handler like so:
$('.update-title').on('change',function() {
var $this = $(this);
$($this.data('target')).val($this.val());
})
You use the data-target attribute to find the element to which you want to apply the select menu's value.
Here's a demo:
--- jsFiddle DEMO ---
$('.update-title').change(function () {
var m = this.id.match(/^modal_TempRowKey_(\d+)$/);
if (m) {
$("#modal_Title_" + m[1]).val(this.id);
}
});
DEMO.
Others have a more elegant approach, here is my attempt:
http://jsfiddle.net/8sLCL/1/
$('.update-title')
.change(function () {
var my_text = $(this).find(":selected").text();
var my_id = $(this).attr("id");
var my_num_pos = my_id.lastIndexOf("_");
var my_num = my_id.substr(my_num_pos + 1 ,my_id.length - my_num_pos );
$( "#modal_Title_" + my_num ).val(my_text );
});