[英]Is there other way to remove both parent table row and child table row using Jquery
I have question regarding removing both table row, one is the child table row and the parent table row, How can i remove both parent and children? 我有关于删除两个表行的问题,一个是子表行和父表行,如何删除父表和子表?
The first append is the parent table row, 第一个追加是父表行,
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
So now after inserting the parent table row, there is a child table (I called this as Condiments in the product) 因此,现在在插入父表行之后,有一个子表(我在产品中称其为调味品)
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments'>\
<td class='condiments_order_quantity'>"+Qty+"</td>\
<td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
<td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
<td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
</tr>");
The Output like this. 这样的输出。
In my onClick button remove 在我的onClick按钮中删除
$('button.removeorderWithCondi').click(function(){
$(this).parent().parent().remove();
});
The whole function (Inserting and Appending in the table) 整个功能(在表中插入和追加)
$("tr#productClicked").click(function () {
var menu_name = $(this).closest("tr").find(".menu_name").text();
var menu_price = $(this).closest("tr").find(".menu_price").text();
var chain_id = $(this).closest("tr").find(".chain_id").text();
var menu_image = $(this).closest("tr").find(".menu_image").attr('src');
swal({
title: "Are you sure to add " + menu_name + " ?",
text: "Once you will add it will automatically send to the cart",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willInsert) => {
if (willInsert) {
swal("Successfully Added to your form.", {
icon: "success",
});
$('.append_customer_price_order').show();
// $('.append_customer_noun_order').append(menu_name);
// $('.append_customer_price_order').append(menu_price);
if(chain_id == 0) {
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithOutCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
}
else
{
$.ajax({
url:'/get_noun_group_combination',
type:'get',
data:{chain_id:chain_id},
success:function(response){
var noun_chaining = response[0].noun_chaining;
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
$.each(noun_chaining, function (index, el) {
var stringify_noun_chaining = jQuery.parseJSON(JSON.stringify(el));
// console.log(stringify['menu_cat_image']);
var Qty = stringify_noun_chaining['Qty'];
var Condiments = stringify_noun_chaining['Condiments'];
var Price = stringify_noun_chaining['Price'];
var allow_to_open_condiments = stringify_noun_chaining['allow_to_open_condiments'];
var condiments_section_id = stringify_noun_chaining['condiments_section_id'];
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments'>\
<td class='condiments_order_quantity'>"+Qty+"</td>\
<td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
<td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
<td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
</tr>");
})
$('button.removeorderWithCondi').click(function(){
$(this).parent().parent().remove();
});
},
error:function(response){
console.log(response);
}
});
}
$('.tbody_noun_chaining_order').html('');
}
});
});
Give the parent a distinct class, eg condimentParent
. 给父级一个不同的类,例如condimentParent
。 Then you can use jQuery's nextUntil()
method to get all the rows between the current parent and the next parent. 然后,您可以使用jQuery的nextUntil()
方法获取当前父级和下一个父级之间的所有行。
$('button.removeorderWithCondi').click(function(){
$parent = $(this).closest(".condimentParent");
$parent.add($parent.nextUntil(".condimentParent")).remove();
});
To solved the problem, I use the nextUntil expression of Jquery 为了解决这个问题,我使用了Jquery的nextUntil表达式
This is the answer. 这就是答案。
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.