I am working on a shopping cart application. I have used jQuery to fetch the items and display it in table format. Each item table contains a remove button to remove it from the cart. I have used the click function on the table to remove the item. But if I click on the qty field also the table is removed because its inside the table. I want the table to be removed when I click the remove button inside the table.
$(document).ready(function(){
$(".add_cart").click(function(){
var id = this.id;
$(this).prop("disabled",true);
$.get("cart.php",{
"id":id
},function(data){
$("#sam").append("<table id='"+id+"' class='tables'><tr><td>"+data+"</td><td><input class='remove' id='"+id+"' type='button' value='Remove'></td></tr></table><br>");
$(".remove").click(function(){
$(table.tables).remove();
$("#"+id).prop("disabled",false);
});
});
});
});
use this:
$("table.tables").remove();
Try
$(document).ready(function () {
$(".add_cart").click(function () {
var id = this.id;
$(this).prop("disabled", true);
$.get("cart.php", {
"id": id
}, function (data) {
$("#sam").append("<table id='" + id + "' class='tables'><tr><td>" + data + "</td><td><input class='remove' type='button' value='Remove'></td></tr></table><br>");
});
});
//use event delegation
$("#sam").on('click', '.remove', function () {
//get the table which contains the button
var $tbl = $(this).closest('tr').remove();
//get the id of the table instead of the id variable
$("#" + $tbl.attr('id')).prop("disabled", false);
});
});
Note that the Id of an element must be unique, you have a table and a button with the same id... remove the id from the button
Related
This question already has answers here:
Getting values of elements in same row when button is clicked, one button per row
(2 answers)
Closed last year.
I have this function which creates a table in a modal popup and the table gets populated from data in an array passed in from an ajax call. Now on the click of a button in the modal popup I need to get the value of item.TimedPathwayID that has its radio button checked and add it to a hidden field.
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function (item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);}
}
I've been fiddling with this kind of thing but with no joy and the radio button in the first row is checked by default so this can't really be tied to a click event if a user just accepts the default without clicking. So how can I do it please?
$('body').on('click', '.radioSelection', function () {
var $tbl = $('#tblTimedPathways tbody');
var $dataRow = $tbl.closest('tr');
var id = $dataRow.find('td').eq(0).html();
});
.closest goes up the html tree, so tbody.closest(tr) is unlikely to be what you want.
you need to then go back down to the cell that contains the data you want.
let $this = $(this); //this is the radio button
let id = $this.closest("tr").find("td.pathwayID").text();
I would also echo that I would generally add the id as an attribute to the row to remove the necessity of the find later.
//sample data
let data = {
d: [{
TimedPathwayID: 1,
TimedPathwayName: "test"
},
{
TimedPathwayID: 2,
TimedPathwayName: "test"
},
{
TimedPathwayID: 3,
TimedPathwayName: "test"
}
]
};
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function(item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);
}
//populate it
PopulateTimedPathwaysTable(data);
$('body').on('click', '.radioSelection', function () {
let $this = $(this); //this is the radio button
//console.log($this);
let id = $this.closest("tr").find("td.pathwayID").text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathways">
<tbody>
</tbody>
</table>
What i accomplished now is when i clicked "add to my stay" button, it will display the name and price data and it will automatically switch to remove button and then click again for another addon to display another name and price data. Now if i press the remove button of the 1st "add to my stay" it will delete both data on each button that i pressed adding. My goal is to remove a data based on its button ID like i want to remove The data on my 1st "Add to my stay" button it will only delete the 1st data
MY JS CODE FOR REMOVE it is outside the (document).ready
function Remove(id) {
console.log("call remove");
$('li.price').each(function (index, object) {
var id2 = $(object).data('addon-id');
console.log(id);
if (id2 === id2) {
$(object).remove();
}
});
$(this).addClass('is-hidden');
$('.addons[data-addon-id="' + id + '"]').removeClass('is-hidden');
}
My code for getting the data on add to my stay button
$(document).ready(function(){
$(".addons").on("click", function(event) {
event.preventDefault();
var $this = $(this);
var id = $(this).data('addon-id');
name = $(this).data('name');
price = $(this).data('price');
console.log(id);
$(this).addClass('is-hidden');
$('.removebtn[data-addon-id="' + id + '"]').removeClass('is-hidden');
if(id != '')
{
$.ajax(
{
type:"POST",
url : "Pages/addonajax",
data:{id:id,
name:name,
price:price},
success:function(data)
{
console.dir(data);
if (data) {
var item = $('<li data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);
Total();
}
else {
}
}
});
}
});
My code on the button
<button data-name = "Airport Transfer" data-price = "4300" class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>
<button class="removebtn remove-btn is-hidden trans_200" data-addon-id ="1" onclick="Remove(1)" value="Remove">Remove</button>
Your problem is here:
if (id2 === id2) {
$(object).remove();
}
id2 will always be equal to itself, and therefore you will always call $(object).remove();
You need to compare id2 to id
if (id2 === id) {
$(object).remove();
}
EDIT
You also have a problem in your loop of the list items:
var id2 = $(object).data('addon-id');
Your list items do not have a data-addon-id attribute
Put a data-addon-id on the list item when you create it:
var item = $('<li data-addon-id="' + id + '" data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);
When I click the delete button, it's deleting all the values. Is it possible to delete each value?
I'm providing the code below:
http://codepen.io/anon/pen/grRKEz?editors=1010
$('#localStorageTest').submit(function(e) {
e.preventDefault();
var email = $('#email').val();
var name = $('#name').val();
var message = $('#message').val();
var div = "<div><span>"+name+"</span><span >"+email+"</span><span>"+message+"</span><input type='button' value='Edit' name='editHistory'><input type='button' value='Delete' name='deleteHistory'></div>"; //add your data in span, p, input..
//alert(div);
$('.gettingValues').append(div); //apendd the div
$('#localStorageTest')[0].reset(); //clear the form
localStorage.clear();
});
Since the form is appending the information wrapped in a div to your "gettingValues" div, then you can just delete the parent element.
Like this:
$('.gettingValues').on('click', "input[name='deleteHistory']", function() {
//var div = "getting form values<input data-name='edit' type='button' value='Edit' name='editHistory'><input data-name='delete' type='button' name='deleteHistory' value='Delete'>"; //No need for this line.
console.log("Data deleted");
//$('.gettingValues').html(div); //Don't reset the html.
if($(this).parent().hasClass('gettingValues')) return false; //Don't remove the container.
$(this).parent().remove(); //Remove the containing div only.
//deleteHistoryAPI(data);
});
Check out: http://codepen.io/gborbonus/pen/grRjjy?editors=1011
I have two html tables: stockdataTable which gets its data from a database call.
result table which is empty initially and dynamically has rows appended to it when a user clicks a row in the stockdataTable.
I capture the selected row using
row = $(this).clone(); and append it to resultTable.
I have a html form "buyTrade" which has 3 elements, one of type hidden, a text field to enter a value, and a submit button.
how do I copy the row data of result table onto the hidden element in the form?
<script type="text/javascript">
var row
$(document).ready(function () {
$("#tabs").tabs();
$('#stockdataTable tr').click(function (event) {
row = $(this).clone();
$('#resultTable').append(row);
$("#resultTable").on("append", "tr", function () {
alert($(this) + " was added");
}, function () {
alert($(this) + " was removed");
});
$(row).click(function (event) {
$(this).remove();
var row = $(this).text();
});
});
});
function reg() {
alert($(row).text());
$('tradeDetail').val("$(row).text()");
return true
}
</script>
Form code:
<form name="buyTrade" method="GET" action="/Stock/BuyServlet" onsubmit="return reg()">
<input type="hidden" name="tradeDetail" value="" id="tradeDetail"></input>Qty:
<input type="text" name="qty">
<input type="submit" value="Buy">
</form>
Check this out:
var row
$(document).ready(function () {
$("#tabs").tabs();
$('#stockdataTable tr').click(function (event) {
row = $(this).clone();
$('#resultTable').append(row);
$("#resultTable").on("append", "tr", function () {
alert($(this) + " was added");
}, function () {
alert($(this) + " was removed");
});
$(row).click(function (event) {
var row = $(this).text().replace(/ /g,''); // replace whitespaces
$(this).remove();
reg(row); // call to reg function
});
});
});
function reg(text) {
alert(text);
$('#tradeDetail').val(text);
return true
}
You need to declare a function with arguments, and then call it when you need. I change $('#tradeDetail').val(text) because you miss #. Note that $(this).remove() is moved after reading his properties, otherwise you can't get the text if it's removed.
I want to give an id to each row in HTML, and when I enter that value into textbox, I want jquery to delete that row.
I have built this fiddle
http://jsfiddle.net/vYAq9/3/
$(document).ready(function(){
$("#addbutton").click(function(){
var uniqueid = $("#textbox1").val();
var text = $("#textbox2").val();
$("<tr><td>row content</td></tr>").val(uniqueid).html(text).appendTo("#table1");
});
$("#removebutton").click(function(){
var uniqueid = $("#textbox1").val();
//I want to find row with uniqueid, and remove it from the table
});
});
$(document).ready(function () {
$("#addbutton").click(function () {
var uniqueid = $("#textbox1").val();
var text = $("#textbox2").val();
$("<tr id=" + uniqueid + "><td>row content</td> </tr>").html(text).appendTo("#table1");
// instead of value add an id | tr does not have a value!
});
$("#removebutton").click(function () {
var uniqueid = $("#textbox1").val();
$('#' + uniqueid).remove(); // use id to delete row with the same id
});
});
FIDDLE
JSFIDDLE DEMO
$("#removebutton").click(function(){
var uniqueid = $("#textbox1").val();
$('#' + uniqueid).remove();
//I want to find row with uniqueid, and remove from table
});