This has been driving me nuts for a few days and i've tried multiple different ways of tackling it. But for some reason it won't remove the element. Can anyone shine some light?
My goal is to on click add the inputed markup then on click of 'remove' remove the whole element.
HTML Mark Up
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Jquery
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
$('body').on('click', '.remtest' function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
I've tried different methods, each method failing.
$(this).closest("p").remove();
and
$('.remtest').on('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Don't dont <p> as a "container" for your code. I switched out your <p> with <div class="container"> and now your code works.
demo
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
Use $(this).closest('.container').remove(); and not $(this).parent('.container').remove(); to get the outer "container".
$(function() {
var test = $('#p_test');
var i = $('#p_test .container').length + 1;
$('#addtest').on('click', function() {
$('<div class="container"><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i + '" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><div>').appendTo(test);
i++;
});
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<div class="container">
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</div>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Here you go.. you were trying to remove the wrong element
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div></p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.input-file-container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
At first, just do not use jquery.
The second thing is that plain javascript is not hard and easy to use.
Therefore you can find how to do the things you want with javascript on the internet.
function GetId(id) {
return document.getElementById(id);
}
const button = GetId("addtest");
button.addEventListener("click", Add);
var id = 0;
function Add() {
files.innerHTML = files.innerHTML +
`<div id="`+ id +`">
<br>
<div class="input-file-container">
<label for="p_test" class="input-file-trigger">
Select a file...
<input type="text" id="p_test" name="p_test_" value=""class="input-file">
</label>
<p class="file-return">
</p>
<button class="remtest" onclick="Remove('`+ id +`')">
Remove
</button>
</div>
<br>
</div>`;
id++;
}
function Remove(id) {
const files = GetId("files")
files.removeChild(GetId(id));
}
<div id="p_test">
<div>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<div class="file-return" id="files"></div>
</div>
</div>
<button class="btn--add" id="addtest">Add</button>
Related
when I clone a div, I'd like the event "delete_row_sticker" to be cloned too but this isn't the case, I don't understand why.
html:
<div id="row_sticker_0" class="row mt-10 justify-content-around">
<div class="col-3">
<input type="text" id="width_sticker_0" name="width_sticker_0" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="length_sticker_0 name="length_sticker_<?= $var?>" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="quantity_stickers_0" name="quantity_stickers_0" class="form-control">
</div>
<div class="col-3">
<div id="delete_0" value="0" name="delete_0" class="hide delete_row_sticker">RAZ</div>
</div>
</div>
<div id="add_row_sticker" class="col-12">
<div><i class="fa-solid fa-plus"></i></div>
</div>
jquery to clone the div "row_sticker_0":
$(document).ready(function(){
var i = 1;
$("#add_row_sticker").click(function(){
var row_sticker_id = 'row_sticker_' + i;
$("#row_sticker_0").clone().appendTo("#sticker_added").prop('id', row_sticker_id);
$('#'+row_sticker_id +' input').each(function(value) {
value.value = "";
value.id += '_'+ i;
value.name += '_'+ i;
});
$('#'+row_sticker_id +' #delete_0').each(function(value) {
value.id = $('#'+row_sticker_id +' #delete_0').attr('id').slice(0,6);
value.id += '_'+ i;
});
i++;
});
});
jquery to delete a row:
$(document).ready(function(){
$(".delete_row_sticker").on('click', function() {
var index = $(this).attr('id');
index = index.slice(7, 8);
$('#row_sticker_' + index).remove();
});
});
I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones
Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Enter the items description"/>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$add_button.click(function(e) {
e.preventDefault();
var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields )
$content.clone().appendTo($clone_wrapper);
});
$clone_wrapper.on("click",".remove_field", function(e){
e.preventDefault();
// this would be more specific.
$(this).parent(".content").remove();
})
});
</script>
As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="description form-control" id="description" name="description" placeholder="Enter the items description"/>
<input type="text" class="fname form-control" id="fname" name="fname"/>
Remove<button type="button" class="add_field_button" id="clone_button">Add another item</button>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$(".add_field_button").click(function() {
//e.preventDefault();
//var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields ) {
$content.clone().appendTo($clone_wrapper);
//$add_button.clone().appendTo($clone_wrapper);// mine
$(".description").each(function(index) {
$( this ).attr('name', 'description'+index)
});
$(".fname").each(function(index) {
$( this ).attr('name', 'fname'+index)
});
}
});
$(document).on('click', "#clone_wrapper .add_field_button", function () {
$('#addDriverContent + .add_field_button').trigger('click');
})
$(document).on('click', ".remove_field", function () {
//e.preventDefault();
// this would be more specific.
$(this).closest(".content").remove();
});
});
</script>
***<!DOCTYPE html>
<html lang="en">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /css/bootstrap.min.css" rel="stylesheet"/>
<div id="order-details-booking">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-14">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
<div id="order-details-booking2">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-1">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /js/bootstrap.min.js"></script>
<script>
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form1-holder-append');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
</script>***
webpage contain 2 form holder, when ever i click add button the action should be performed to each holder separately, but now the if we press add button, the it add form to both form holder.I shared the code in above, I hope I may get help as soon as possible, Thank for help..
********It looks like your post is mostly code; please add some more details.
if you only have two formholders you can solve this by useing unique classes.
var id_count = 1;
$('.add1').on('click', function() {
var source = $('.form-holder1:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append1');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add2').on('click', function() {
var source = $('.form-holder2:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form-holder-append2');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
if you have a dynamic amount of formholders you should use a each() function and count the formholders and each element inside with eq(). This results in only one function for all formholders, independently how many.
I'm trying to add bullets to multiple textarea. This works fine when the textareas are not hidden, however I'd like to be able to add bullets to newly created textareas (click on the button "Add New". Ideally I'd like also newly created bullets to go to the next line rather than to be displayed side by side.
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.prependTo(editArea);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
You should attach click event on newly created anchors:
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.find(".add-bullet").click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022\n';
});
return false;
});
$(".textarea").next().append(item);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
Basically, when i type in either textarea or textbox the span should show until the criteria is made.
Only when all three are validated should the submit button "save" show().
however all that is happening is the first two textbox spans are showing when i start writing in them (however not from the focus) but do not disappear when the criteria is met
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
//...START OF ADDBOX
$('span').hide();
$('#save').hide();
$nameText = $('#name');
$companyText = $('#company');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
http://jsfiddle.net/opfczh69/ js-fiddle here
You are referencing your textboxes using the names not their ids so it doesnt match anything.
You need to reference them as #textbox, #textbox1, #comment and give the comment box an id:
$('span').hide();
$('#save').hide();
$nameText = $('#textbox');
$companyText = $('#textbox1');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment" id="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
Updated Fiddle