Dynamically create button and then remove button when clicked

Dynamically create button and then remove button when clicked

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');
});


I am sure I am doing something silly but for the life of me, I cannot figure it out?

Any help will be most appreciated.

Kind regards

Wayne