删除ajax加载的元素

Question

I want to load the data(as buttons) by checking one of the checkboxes and prepending it if I click the other one and remove the data by unchecking one of the checked checkboxes.

I'm using AJAX to load the data(as buttons) and find that data(button) in the page to be removed.

    $("input:checkbox").change(function(){

        if(this.checked){

            console.log("Checked");
            var typeID = $(this).prop("value");
            $.ajax({
                url: "load-buttons.php",
                method: "POST",
                data:{ typeID: typeID},
                success:function(data){
                    $('#div4-btns').prepend(data);
                    console.log(data);

                    $("button").click(function(){  
                        var plantID = $(this).prop("value");  
                        $.ajax({  
                            url:"load-plants.php",  
                            method:"POST",  
                            data:{ plantID: plantID},  
                            success:function(data){  
                                $('#div-4data').html(data);
                                console.log(data);
                            }  
                        });  
                    });
                }
            });

        }else{
            console.log("Unchecked");
            var typeID = $(this).prop("value");
            $.ajax({
                url : "load-buttons.php",
                method: "POST",
                data:{ typeID: typeID},
                success:function(data){
                    $('#div4-btns').find(data).remove(data);
                    console.log(data);
                }
            });
        }

    });

I want to remove the loaded data(button).

Answer 1

Wrap your initial data within a div that you can select later on.

$('#div-4data').html('<div id="div-4data-content">data</div>');

When you need to remove it, target that div and remove it.

$('#div-4data-content').remove();