CODEWITHSUNDEEP
jqueryjson
IlludiumPu36
IlludiumPu36

Reputation: 4304

appending and removing dynamic php menus with json

I am using the following code to append a dynamic php menu to a table cell. 

$("input:radio[id='l1_allowed_0']").click(function() {  

$(".l1_p1_action").append('<select name="pathway_actions[]" id="pathway_actions">' );

$.getJSON('../scripts/get_pathway_actions.php', function (json) {
$("#pathway_actions").empty();
$.each(json, function () {
$("#pathway_actions").append(new Option(this.action));
});  
});
});

What would I use to remove the menu from $(".l1_p1_action"), say in:

$("input:radio[id='l1_allowed_1']").click(function() {  


});

EDIT

I have changed the code to create menus with unique IDs. Two problems:

The remove isn't working and a new menu gets appended each time the radio button gets clicked:

$("input:radio[id='l1_allowed_0']").click(function() {  

$(".l1_p2_actions").remove();
$(".l1_p3_actions").remove();
$(".l1_p4_actions").remove();

$(".l1_p1_action").append('<select name="l1_p1_actions" id="l1_p1_actions">' );

$.getJSON('../scripts/get_pathway_actions.php', function (json) {
$("#l1_p1_actions").empty();
$.each(json, function () {
$("#l1_p1_actions").append(new Option(this.action));
});  
});
});



$("input:radio[id='l1_allowed_1']").click(function() {  

$(".l1_p1_actions").remove();
$(".l1_p3_actions").remove();
$(".l1_p4_actions").remove();

$(".l1_p2_action").append('<select name="l1_p2_actions" id="l1_p2_actions">' );

$.getJSON('../scripts/get_pathway_actions.php', function (json) {
$("#l1_p2_actions").empty();
$.each(json, function () {
$("#l1_p2_actions").append(new Option(this.action));
});  
});
});

Aargh, wrong selector on the remove lines... changed to the following and the removes are working now.

$("#l1_p2_actions").remove();
$("#l1_p3_actions").remove();
$("#l1_p4_actions").remove();

Still have the problem with extra empty menus being appended to a cell if the radio button is clicked multiple times...

Upvotes: 0

Views: 127

Answers (1)

Lafinboy
Lafinboy

Reputation: 160

You can just use the remove function and specify the id of the element to be removed, as the id should be unique on the page:

$("input:radio[id='l1_allowed_1']").click(function() {
    $("#pathway_actions").remove();
});

Upvotes: 1

Related Questions