I am trying to remove the via textbox, remove button and horizontal line when the Remove button is clicked (as seen in the image below).
I've tried the following so far but it doesn't work:
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent.closest('input').remove();
$(this).parent.closest('hr').remove();
});
});
Fiddle here
Thanks for your help.
You need to use prev() instead of closest().
Use
// Remove waypoints
$(".remove-waypoint-button").click(function () {
$(this).prev('input').remove();
$(this).prev('hr').remove();
$(this).remove();
});
DEMO
However I would recommend you to wrap input and button in a div, then you can use .parent() to remove all at once. Here's an example.
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent('div').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="waypoints">
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
</div>
A better approach would be to improve your mark up by grouping similar fields.
This improves the script too.
I hope this is what you expected.
$(function() {
$(".remove-waypoint-button").on("click", function() {
$(this).parent(".container").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="waypoints">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<hr>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
</div>
closest() works on the parent of the element. hr and input are not parent of label.
thanks
Related
I have form where I can add options and add new fields of options. I am using JQuery for this. The problem is that the remove button of added fields doesn't work.
Here's my form:
Logic
I click Add New button and new row will add Working
I click Remove it has to remove that row Not Working
$(function() {
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" id="removerow">Remove</button></div></div>');
});
//Remove the row
$('.removerow').on('click', function(e) {
e.preventDefault();
$('.newrowadded').closest("div.row").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>
Any idea how to fix that remove action?
There are two issues in your code:
the call to on() is missing the "selector" argument, which means that no elements dynamically added in future will have the click event boundy
your remove logic needs to be executed relative to the button being clicked
Try the following changes in your .removerow click handler:
/*
Bind the click handler to all elements dynamically added that match the
.removerow selector
*/
$('body').on('click','.removerow', function(e){
e.preventDefault();
/*
Explaination:
1. from "this" remove button being clicked,
2. select the closest ".newrowadded" and,
3. remove it
*/
$(this).closest(".newrowadded").remove();
});
See the snippet below for your a working example based off of your code:
$(function() {
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger">Remove</button></div></div>');
});
//Remove the row
$('body').on('click', '.removerow', function(e) {
e.preventDefault();
$(this).closest(".newrowadded").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>
The problem is that your code is only being executed on page load and at this time, your remove button is not yet created. You need to add an event listener to the remove button after your remove button has been created.
Button.removerow was added later. you can try this:
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" id="removerow">Remove</button></div></div>');
//Remove the row
$('.removerow').on('click', function(e) {
e.preventDefault();
$('.newrowadded').closest("div.row").remove();
});
});
In oder to match your event listener to later created elements, you need to delegate it. In older JQuery versions it was done by the .delegate method, however, in recent versions this method is deprecated. Now you can delegate by ancestorCollection.on('query-selector', 'event', listener).
In your example something like
$('.newrow').on('.removerow', 'click', function(e){ /*...*/ })
The issue is that you are trying to bind actions on elements that are not yet created - you should use a more general binding as below:
$(function(){
//add row for options
$("#addnewoptinrow").click(function(e){
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" class="removerow">Remove</button></div></div>');
});
//Remove the row
$(document).on('click','.removerow', function(e){
e.preventDefault();
$(this).parent().parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>
Pay attention to the
$(document).on('click','.removerow', function(e){
line of code. This line appends the action to all of the '.removerow' elements, present and future. So when new elements are added with this class, they are automatically assigned this action (BTW, had to change your HTML from id="removerow" to class="removerow", to avoid duplicate ID's).
And please read this topic, it goes into more details of your issue.
I have the following HTML structure, which cannot be changed.
I need to append the user typed info to a <ul> list with jQuery.
I have tried it using the following code but id does nothing. What would be the correct way to do it?
$(document).ready(function() {
$(".btn btn-outline-primary").click(function() {
let toAdd = $("input[#title]").val();
$("<li>" + toAdd + "</li>").appendTo("<ul>");
});
});
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button type="submit" class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
</body>
</html>
A bunch of bugs to fix:
Separating selectors with space means that the document is searched for the first selector with a descendant of the second selector - you don't want that here, keep the class names together (or just select the btn-outline-primary alone, since there's only one of them)
You need to preventDefault() to keep the form from submitting and replacing the page
The existing ul in the HTML should be selected if you want to append to it - '<ul>' isn't a valid selector.
The #title should just be selected as #title (ids can't be repeated in HTML, after all):
$(".btn-outline-primary").click(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
});
});
First override the submit.
Value should be fetched properly. using #title
Append to proper element
You have wrong selectors in your code (for btn and title), plus i'd change also the append code.
Also, you have a submit button inside a form, clicking it will cause the submit.
Try this:
$(document).ready(function(){
$("form").submit(function(e){
//prevent form submit;
e.preventDefault();
//append input text value to UL
$("ul").append("<li>" + $("#title").val() + "</li>");
});
});
Click here to test if in JsFiddle
I'm trying to allow users to enter 1 character in the input and then JUMP into the input field.
This works like this: https://jsfiddle.net/ej9tvosj/1/
But when I put the inputs inside divs, the function stops working.
https://jsfiddle.net/ej9tvosj/2/
My code that doesn't work is identical to the one that works but the HTML part is different.
$(document).on('input', '.inps', function(event) {
$(this).attr('type', 'tell');
function showpanel() {
$('.inps').attr('type', 'password');
$(this).attr('type', 'tell');
}
// use setTimeout() to execute
setTimeout(showpanel, 1000);
// check for hyphen
var myLength = $(this).val().trim().length;
if (myLength == 1) {
$(this).next('.inps').focus();
$(this).next('.inps').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="inps">enter number</label>
<br>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
</div>
Could someone please advise on this issue?
You need to select the parent of the current input & then find it's sibling div & then find it's child input
$(this).parent().next('div.split4').find('input').focus();
DEMO
The reason is in the usage of the jQuery next function.
Here the official doc:
Description: Get the immediately following sibling of each element in
the set of matched elements. If a selector is provided, it retrieves
the next sibling only if it matches that selector.
After that you wrapped all of them with a div, they are not anymore siblings that's why this piece of code doesn't work anymore:
$(this).next('.inps').focus();
Simply change it with:
$(this).parent().next('.split4').find('input').focus();
$(document).on('input', '.inps', function(event) {
$(this).attr('type', 'tell');
function showpanel() {
$('.inps').attr('type', 'password');
$(this).attr('type', 'tell');
}
// use setTimeout() to execute
setTimeout(showpanel, 1000);
// check for hyphen
var myLength = $(this).val().trim().length;
if (myLength == 1) {
$(this).parent().next('.split4').find('input').focus();
$(this).parent().next('.split4').find('input').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="inps">enter number</label>
<br>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
</div>
You can change where you navigate to the next input you can use closest and find to select the next input - see demo below:
$(document).on('input', '.inps', function (event) {
$(this).attr('type', 'tell');
function showpanel() {
$('.inps').attr('type', 'password');
$(this).attr('type', 'tell');
}
// use setTimeout() to execute
setTimeout(showpanel, 1000);
// check for hyphen
var myLength = $(this).val().trim().length;
if(myLength ==1){
$(this).closest('.split4').next('.split4').find('.inps').focus().val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="inps">enter number</label>
<br>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
<div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div><div class="split4">
<input type="tell" class="form-control inps" maxlength="1">
</div>
</div>
I was wondering if it possible to find an input by it's closest element?
real code:
<form method="post" action="">
<div class="rocket-form">
<fieldset>
<legend>Person Contacts</legend>
</fieldset>
<div class="rocket-label-element no-height">
<dt id="id-label"> </dt>
<dd id="id-element">
<input type="hidden" name="id" value="" readonly="readonly" id="id">
</dd>
</div>
<div class="rocket-label-element no-height"><dt id="vendor_id-label"> </dt>
<dd id="vendor_id-element">
<input type="hidden" name="vendor_id" value="" readonly="readonly" id="vendor_id">
</dd>
</div>
<div class="rocket-label-element">
<div id="firstname-label">
<label for="firstname" class="rocket-label optional">First name</label>
</div>
<div class="rocket-element">
<input type="text" name="firstname" id="firstname" value="any first name" maxlength="64" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="lastname-label">
<label for="lastname" class="rocket-label optional">Last name</label>
</div>
<div class="rocket-element">
<input type="text" name="lastname" id="lastname" value="any last name" maxlength="64" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="phone-label">
<label for="phone" class="rocket-label optional">Phone</label>
</div>
<div class="rocket-element">
<input type="text" name="phone" id="phone" value="0123456789" maxlength="32" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="email-label">
<label for="email" class="rocket-label optional">Email</label>
</div>
<div class="rocket-element">
<input type="text" name="email" id="email" value="name#someMail.com" maxlength="128" readonly="readonly">
</div>
</div>
</div>
</form>
I have this form, and I want to get the value of the inputs in variables..
I tried to use "vendor_id" in order to use closest() or next() or prev() but no luck..
so, any help?
You can use
var vendorId = $("#vendor_id").val();
to get the value of vendor_id.
Be sure to include the # which identifies it as an id.
If you want to get the values of all the inputs, you can use:
$("input, select, textarea").each(function(){
// Get value of inputs
});
If you have more than one form, you may use:
var formData = $(".rocket-form").closest("form").serialize();
Remember you will need to include jQuery with a script tag and you should wrap your code like so:
$(function() {
console.log( "ready!" );
});
This ensures the page is ready before your JavaScript executes.
you can try this
var form = $("#vendor_id").closest("form").get();
$("form :input").each(function(){
var input = $(this);
var AllInputValues= $(input).val();
alert (AllInputValues);
});
EDIT
var theVendform = $("#vendor_id").parent().closest("form").get();
alert(theVendform["0"][3].defaultValue);
alert(theVendform["0"][4].defaultValue);
alert(theVendform["0"][5].defaultValue);
alert(theVendform["0"][6].defaultValue);
Not sure if I completely understand what you are asking but what about
$('#vendor_id-element input').val()
You a class in all your inputs where you want to get value, and do de following js
Array.prototype.slice.apply(document.querySelector('.your-input-class')).forEach(function(el){
Console.log(el.value);
});
try this
var inputs = $('form').find('input');
//inputs is the array of your inputs and values can be accessed by:
var value1 = $(inputs[0]).val();
//or you can use for loop or forEach
for (var i = 0; i < inputs.length; i++) {
var currentValue = $(inputs[i]).val();
alert(currentValue);
}
Why does the output not change when I change the input?
HTML
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"></input>
</div>
jQuery
$('#in').on("change", function(){
$('#out').html($(this).val());
});
http://jsfiddle.net/ahpu8wwx/2/
The code works, make sure you have included jQuery.
You are missing jQuery library in your fiddle. Use input or keyup event for instant update. change event only fires when you are focus out from input field
$('#in').on("input", function(){
$('#out').html(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"/>
</div>