Why does jquery not remove an appened div - javascript

I have fields in a form and allow the user to add or remove items. The first appended highlight will remove ok but any added ones will not remove.
I have tried the following and had no luck jQuery $(this).remove() not working after append
Here is a jsfiddle of the code below http://jsfiddle.net/3PzmH/3/
<!-- html -->
<div class="features"></div>
// js
var highlight = '<div class="form-group"><label for="highlight" class="col-sm-3 col-lg-2 control-label">Hightlight:</label><div class="col-sm-9 col-lg-3 controls"><input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" value="Hightlight Name"></div><div class="col-sm-9 col-lg-7 controls"><textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea><i class="fa fa-plus"></i> Remove Highlight</div></div>';
$('.features').append(highlight);
$('#add_highlight').click(function(){
$('.features').append(highlight);
});
$('.remove_highlight').on("click", function(){
$(this).closest('.form-group').remove();
});

Delegate the event to the static parent element
$('.features').on("click", '.remove_highlight', function(){
$(this).closest('.form-group').remove();
});
FIDDLE

You need to use event delegation for dynamically added elements
$('.features').on("click",'.remove_highlight', function(){
$(this).closest('.form-group').remove();
});
DEMO

because dynamically added element dos not bind any function on it.
use the event delegation
$('.features').on('click', '.remove_highlight', function() {
$(this).closest('.form-group').remove();
});

Please use delegate. Refer the updated fiddle.
http://jsfiddle.net/3PzmH/7/
$(document).delegate('.remove_highlight',"click", function(){
$(this).closest('.form-group').remove();
});

Related

Dynamic add divs to html using js

I am trying to add html divs( with textfields) using button click.My form look like this :
On add size button click it add one row (Price and size ) and one add More item button click i want to add new area with name,price and size and so on.
HTML Code is :
<div class="clearfix"></div>
<div class="moreitems form-group" style="border:1px solid #ccc;height:200px;display:none;">
</div>
My js code is :
jQuery("#addmoreitems").click(function () {
var options = jQuery("#select1").html();
jQuery('.moreitems').css("display","block");
var fld = '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Product Name :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="pname[]" id="pname"></div></div></div>';
fld += '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Price :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="more_prices[]" id="prices"><select name="more_size[]" class="mysize">'+options+'</select></div></div>';
fld += '<div class="col-sm-4"><div class="col-sm-3" style="margin-top:15px;"><button type="button" id="addsize" class="btn btn-info">Add Size</button></div></div>';
jQuery('.moreitems').html(fld);
jQuery('.mysize').html(options);
});
});
But this code add first time.I want to add as many times the add more items button.Also on add more size button want to add price and size fields.
The problem is that you're using html() function which replaces the entire html contents, where in your situation you want to append() the HTML every time you click the button.
Change:
jQuery('.moreitems').html(fld);
To:
jQuery('.moreitems').append(fld);
Hi as i know the may the problem is in appending the using the .html() method.
here the difference between this two methods reference link given
http://www.slideshare.net/umarali1981/jqueryappend-vs-jqueryhtml
cause .html() overwrites the contents of the DIV. while .append() will add to the contents of the DIV. so use this and another thing to notify is that you should bind the 'click' event in-spite of using the only 'click' method like.
$("#addmoreitems").unbind('click').bind('click',function () {
// write your code here
});

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 remove div and previous label?

These are some input fields which i need to remove, but i am not able to remove the label tag
<label class="prfx-row-title">Unique Selling Proposition </label>
<div class="prfx-row-content">
<input type="text" name="dynamic_usp[0][text]" placeholder="unique selling proposition " value="testing hello world" />
<span class="remove button">Remove USP</span>
</div>
$(".remove").live('click', function() {
$(this).parent().remove();
$(this).parent().prev('label.prfx-row-title').remove();
});
Now only the div is remove but not the label?
Anyone?
That's because when removing the div, it is no longer in the DOM, so the label is not a sibling anymore. remove the label first, then the div:
$(".remove").live('click', function() {
$(this).parent().prev('label.prfx-row-title').remove();
$(this).parent().remove();
});
Or better :
$(".remove").live('click', function() {
$(this).parent().prev('label.prfx-row-title').remove()
.end().remove();
});
You can't remove prev() from something that is no longer there... so the easiest fix is just to rearrange the order...
$(".remove").live('click', function () {
$(this).parent().prev('label.prfx-row-title').remove();
$(this).parent().remove();
});
Also, if possible you might want to update the version of jquery you are using and use on() instead of live(). live() has been deprecated since 1.7 and removed since 1.9
JSFiddle
You could also consider changing your DOM to something like...
<div class="prfx-row">
<label class="prfx-row-title">Unique Selling Proposition</label>
<div class="prfx-row-content">
<input type="text" name="dynamic_usp[0][text]" placeholder="unique selling proposition " value="testing hello world" /><span class="remove button">Remove USP</span>
</div>
</div>
and that way you could just do..
$(this).closest("prfx-row").remove();
JSFiddle

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

Duplicate DIV with input field

Basically I've managed to become stuck yet again trying to duplicate a DIV and it's form elements using jQuery.
Button:
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
Div and contents I wish to duplicate
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
I've tried using the clone method, I just can't seem to create a functioning line of code that will duplicate it beneath the first div, and make it ready for PHP multiple data entry.
Thanks!
Something like this would be a start:
$("#addSkill").click(function(e){
e.preventDefault();
var new_skiller = $("#skiller").clone();
new_skiller.attr("id", "skiller-"+$(".row").length);
new_skiller.insertAfter(".row:last");
});
You need to clone and then append() the item inside a div like so:
HTML
<div class="thing">
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
</div>
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
jQuery
$(document).ready(function(){
$('#addSkill').click(function(){
var thing = $('#skiller').clone();
$('.thing').append(thing);
});
});
View the jsFiddle Demo....
Note: you'll need to give them seperate names/make it an array to access
Try this. should work. Note: ID can not be duplicated. the following code will duplicate div with id as well.
$(document).ready(function(){
$('#addSkill').click(function(e) {
var skiller = $('#skiller').clone();
$( "#skiller" ).after( skiller );
});
});
Demo:
http://jsfiddle.net/XpN95/

Categories

Resources