document.getElementById（）はnullを返します

Question

私はウィジェットの作成と削除と編集を可能にするJSのライブラリを作成しています。新しいウィジェットを作成すると、そのウィジェットは自動的に "widget5"のようなIDを取得するか、配列内の次の番号を取得します。削除すると、document.getElementById（）はIDを見つけることができず、nullを返します。

この問題に関する多くの質問があり、その答えは通常、ページの前のJavaScriptの読み込みと関係がありますが、私が書いているウィジェットライブラリはページが読み込まれた後にウィジェットを追加するので、問題ではありません。

JSを使用してウィジェットを作成するとき、JSが何らかの理由でそれを見つけることができないという問題があると思います。例えば、私がウィジェットでハードコーディングした場合、JSはIDを見つけることに問題はありません。これをどうすれば解決できますか？

ご協力いただきありがとうございます。

http://codepen.io/amstrudy/pen/grxpOK

//this is just the function that is supposed to find the id, check the codepen above for the full code 

    function deleteWidget(){ 
     var widget = document.getElementById("delList"); 
     widget = widget.options[widget.selectedIndex].text; 
     window.alert(widget); 
     widget = document.getElementById(widget); 
     window.alert(widget); 
     document.getElementById("body").removeChild(widget); 
    } 

Answer 1

ウィジェットのID内のスペースがあります：

div.setAttribute("id", " widget" + widgetNum); 
        ^here 

Answer 2

選択されたオプションの値はvalue atttributeに保存されています。

widget = widget.options[widget.selectedIndex].value; // instead of .text 

Answer 3

あなたは先頭にスペースを持っていますid内。

widget = document.getElementById(widget); 

へ：あなたのdeleteWidgetの機能変更で

widget = document.getElementById(" " + widget); 

か、単に削除スペース

div.setAttribute("id", "widget" + widgetNum); 

はここに固定：http://codepen.io/theConstructor/pen/XKabpj

希望これは