Search jQuery

jQuery Forum

Getting Started

Wayne1

Dynamically create button and then remove button when clicked

in Getting Started • 4 years ago

Hi,

I am a newbie and new to this forum so I hope I dont contravene or breach any protocols.

I have divs in html and when I click the div I am adding a button. eg attached:

<div class="week">
            <div class="day wk1" id="day1">   
                <label for="day1">Test</label>       
            </div>
            <div class="day wk1" id="day2">  
                <label for="day2">Test</label>       
            </div>

When I add a button by clicking on the div, no problem.

$(".day").click(function (e) { 
            e.preventDefault();
            var check = $("#day7").width() - 2;
            var insert = $(this).prop("id");
            insert = `#${insert}`;
            var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "orange");
            par.appendTo(insert);
            console.log(insert);
        });

When I remove the button by clicking on it it does remove it but simultaneously adds a new button as per the code above.

$(".day").on('click','.testing', function(e){
            e.preventDefault();
            $(".break").remove;
            $(this).remove();
            // alert('test');
        });