We Keep Coding

How to remove cloned element div except first div using jquery

I have a problem with removing cloned div. I*m unable to remove the cloned div which div clicked on to be remove. My code is like below:
<div id="item_details">
<table>
<tr>
<td>
<p class="label_text">Name:</p>
</td>
<td>
<input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Brand:</p>
</td>
<td>
<input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Model No:</p>
</td>
<td>
<input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
</td>
</tr>
</table>
<p style="margin:-16px 0px 0px 600px;">
Remove Item
</p>
</div>
<div id="new_item_details" class="new_item_details"></div>
<p style="margin:0px 0px 0px 0px;">
Add New Item Here
</p>
And my jquery code like this:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id);
});
jQuery('.remove').click(function(e){
jQuery("#new_1").last().remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});
</script>
I tried like this. For every cloned div I appended new div id with increment number. But I'm unable to remove the particular cloned div. First div dont be removed. please help me how to solve this. Thanks.

The problem is that you subscribe to .remove elements click event at page load. The .remove elements inside your cloned divs will not be part of this subscribe. You have to use event delegation to subscribe to new elements created after page load as well:
replace:
jQuery('.remove').click(function(e){
by
jQuery(document).on('click', '.remove', function(e){
Also, a simpler solution will be to just remove the parent div of your clicked .removeelement:
jQuery(document).on('click', '.remove', function(e){
var parentDiv = jQuery(this).parent().parent();
// if not original div (id == item_details)
if(parentDiv.attr('id') !== 'item_details') {
parentDiv.remove();
}
e.preventDefault();
});

Whilst the first answer was there before me and pointed out the problem with the click, I'll still post this as I may as well, it's a different approach to solving the removal.
I've added data attributes to each of the clones, and a corresponding data-id to the button too, so on click it check it's id and removes the form with that id.
So if it helps :) http://jsfiddle.net/sfmwbgfa/
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id).attr('data-id', id);
button.find('.remove').attr('data-id',id);
});
jQuery(document).on('click', '.remove', function(e){
var thisId = jQuery(this).data('id');
jQuery('div[data-id="'+thisId+'"]').remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});

try
use event delegation like which is used by manji
jQuery(document).on("click",".remove",function (e) {
OR use clone(true) : it will copy event handler (deep copy)
var button = $('#item_details').clone(true);
NOTE: id should be unique
var id = 0;
jQuery(document).ready(function () {
var max = 10;
jQuery('#add_item').click(function () {
var button = $('#item_details').clone(true);
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id', 'new_' + id);
});
jQuery('.remove').click(function (e) {
jQuery("#new_"+id).remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
id--;
e.preventDefault();
});
});
**
DEMO
**

Call a function from a class name using jQuery

I have a table which have class name Start_point on tr. I want a method which should call on click by class not on click by attribute.
<tr class="Start_Point" style="background: none repeat scroll 0% 0% yellow;">
<td>
<input type="checkbox">
</td>
<td>4</td>
<td>MaxFort School, Parwana Road</td>
<td>28.69178</td>
<td>77.10968</td>
<td>09:34:29</td>
<td>Start</td>
<td>
<input type="button" value="Edit">
<input type="button" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" value="Delete">
</td>
</tr>

Try using class selector of jquery
$('.Start_Point').click(function(){
});

$(function(){
$('.Start_Point').click(function(){
// your code
})
})

Try this
$(function(){
$(".Start_Point").click(function(){ alert("Your function"); }
});

$(function(){
$('.<className>').click(function(){
alert("<Your enter code here>")
})
})

If you want to handle rows which get the Start_Point class later, rather than not having it initially, you can use event delegation for that:
$("selector-for-the-table").on("click", ".Start_Point", function() {
// ...
});

I think you are asking the functionality as this refer this link (JSFiddle) I developed this have a look
$(document).ready(function(){
$(".Start_Point").click(function(){
console.log("called");
alert("do want you want to do");
});
});

Jquery selecting inputs with adjacent asterisk

Using jquery, I'm trying to select those inputs that have an asterisk adjacent to them.
HTML
<form name="checkout">
<table width="100%" border="0">
<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" value="" />*</td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" value="" /></td>
</tr>
</table>
</form>
Jquery
var elems = $("form[name='checkout'] :input").filter(function(index) {
var str = $(this).parents('td').html()
return (str.indexOf("*")!=-1)
}).length;
Result of elems should be 1 but it's not working, i.e. the form submits in spite of a return false in the handler so can't seem to catch the error details. What am I doing wrong?

var elems = $("td:contains('*') input");
This is selector for the input elements that you need.
elems.length will give you 1 in this case

Ha Ha,
Missing the onReady().
Use this one,
$(function(){
var elems = $("form[name='checkout'] :input").filter(function(index) {
var str = $(this).parents('td').html()
return (str.indexOf("*")!=-1)
}).length;
console.log(elems);
});
That should do. Cheers :).

I suggest you to use CSS :after pseudo element
<style>
.mandatory:after{
content:"*";
}
</style>
<span class="mandatroy">
<input type="text" name="FirstName" value="">
</span>
<script>
$("form[name='checkout'] .mandatory > :input")
</script>

It would be easier, if you added a class to the inputs which have an asterisk after them:
<td><input type="text" name="FirstName" class="required" />*</td>
Then you could select them by their class and do whatever you wish to them.
$("input.required").length();

Given the explicit requirement:
$('input').filter(function () {
return (this.nextSibling && this.nextSibling.nodeValue.indexOf('*') > -1) || (this.previousSibling && this.previousSibling.nodeValue.indexOf('*') > -1);
}).css('border-color','#f00');
JS Fiddle demo.

JQuery mobile not styling user input check item to same as the rest of list

I have finally succeeded in being able to add user input items to a check list. However, when they are added they are not taking on Jquery Mobiles style.
This is a screen shot of what is happening
This is the HTML:
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
My stuff
</label>
</td>
</tr>
<tr>
<td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
/td>
</tr>
</table>​
This is the script for adding the user input item to the check list:
<script type="text/javascript">
$(document).on('click', '#add', function(e) {
var $this = $(this);
var $firstRow = $this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
var input = $newRow.find(':input').remove();
input.prop('checked', false);
$newRow.empty().append(input).append(' ' + $('#textinput4').val());
$newRow.insertAfter($firstRow);
});
</script>
I read on a different question that perhaps I could include
$('[type='submit']').button();
in order to style the user input items. However, I am unsure if this is right for me or where I would put this in my script?
Thanks.

This should be used:
$('[type="checkbox"]').checkboxradio();
If you want to find out more about this and how dynamically added content can be correctly styled take a look at my blog ARTICLE, there you will find everything about enhancing dynamically added jQuery Mobile content. Or you can find it HERE.

At first sight you code has a jQuery syntax bug, it should look like this:
$('[type="submit"]').button();

Multiple checkbox value will show in textbox

Here is my code :
<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>
I'm trying that: if (more than one) checkbox is selected (or checked) that value will be assigned into the checkbox like "abcd" or "acd" or "bd".For that I have written jQuery
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
$("#text").val(("#check").val());
}
});
</script>
able to print one txtbox value at a time,but not able to put all checked value in the textbox at a time.
Where I am going wrong ??Any inputs will appreciated.

I may have not understood you correctly, but does this fiddle help you? http://jsfiddle.net/XwGJ9/1/
The change is the javascript:
var $textInput = $('#text');
var $checkBox = $('#checkboxes');
$('input').click(function(){
populateTextInput();
});
function populateTextInput () {
// empty text input
$textInput.val('');
// print out all checked inputs
$checkBox.find('input:checked').each(function() {
$textInput.val( $textInput.val() + $(this).val() );
});
}
Edit: updated

Use this code
$('.check').click(function(){
$("#text").val('');
$(".check").each(function(){
if($(this).prop('checked')){
$("#text").val($("#text").val()+$(this).val());
}
});
});​
​
With this HTML (use class instead of id for abcd)
<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>​
Also I encourage to use CSS instead of align="center"
See live, running demo

So I think you're wanting to append the values together in the textbox. In that case, do:
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
// Load the resulting value into new var textBoxVal.
$("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>
I used native JS just to make it clearer what I'm doing.

had used something like this.. might help you
var checkeditems = $('input:checkbox[name="check[]"]:checked')
.map(function() {
return $(this).val()
})
.get()
.join(",");
$("#text").val(checkeditems);

If you just want no multiples of a,b,c,d at one time, the onclick is per checkbox
var boxes = $("input:checkbox");
boxes.each(function(idx,elem){
elem.onclick=function(event){
var choices = "";
boxes.each(function(idx,elem){
choices += elem.checked ? elem.name:"";
});
$('#text').val(choices);
}
});