I have a button <button onclick="takedown()"> take down </button> that creates a H1 and button with the id of the text in my text field and h1 at the end for the h1 and button at the end for the button the button has a onclick onclick="delete()". This is that function

    function takedown(){

note = document.getElementById("noteinput").value;

idh1 = note + "h1";
idbutton = note + "button";
idcenter = note + "center";

$('<center id="' + idcenter + '"> <h1 id="' + idh1 + '">' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote()"> Delete </button> </center>').appendTo("body");


}

For the delete function the remove() works only if the id of the button and the h1 is one word.

function deletenote(){
    // First setting
    var idbuttondelete = event.target.id;
    var idh1delete = idbuttondelete.replace("button", "h1");
    // Removing the button, h1,center
     $('#' + idbuttondelete).remove();
     $('#' + idh1delete).remove();

}

Does anybody know whats wrong or how to use JQuery to delete something if it has a two word id.