複数のDiv要素を一度に削除する - JavaScript

Question

私が持っている奇妙な問題に関して特に質問はありません。基本的には、ユーザーの電話番号と内線番号を入力するためのフォームが用意されています。フォームに電話/内線番号を追加できるように[追加]ボタンを作成しました。私はフォームで、そしてSQLコードに対しても正しく機能しています。問題は、フォームとSQLコードを削除することです。新しいエントリには、その特定のもののDIV情報を保持する独自の「削除」リンクがあることがコード内で分かります。そしてそれはそれを取る "削除"機能に行きます。それはフォームのためにうまく動作しますが、SQLコードのために何もしません。私はそれを削除する関数を持っているので、私はSQLコードのための何かを作成しました。そして、テストするために、フォームと同じ「Remove」hrefを入れます.SQL部分のリンクをクリックすると削除されます。 私はフォーム部分の削除リンクをクリックし、特定のフォームと対応するSQLコードを取り出す方法を見つけようとしています。 私は、SQL部分のDIV名と一致するフォームDIVから名前を取得しようと考えていましたが、動作させることができません。

//// 
    //-------------Add Phone Form---------------- 
    //// 

    function addElement() { 

    var ni = document.getElementById('phoneDiv'); 
    var numi = document.getElementById('theValue'); 
    var num = (document.getElementById('theValue').value -1 + 2); 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'phoneDiv'+num+''; 
    var sqlDivIdName = 'SQL'+divIdName+''; 
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = '<input type=hidden id=' + num + ' name='+sqlDivIdName+' value='  + num + '><a href="javascript:remove('+divIdName+')">Remove</a> <tr><td>Phone Number:</td> <td> <input type="text" name="phone' + num + '" maxlength="10"> </td></tr> <tr> <td>Extension:</td><td> <input type="text" name="ext' + num +'" maxlength="5" value="00000">'; 
    ni.appendChild(newdiv); 

    javascript:addElement2(); 
    } 

    //// 
    //-------------Add Phone SQL---------------- 
    //// 

    function addElement2() { 

var ni = document.getElementById('SQLphoneDiv'); 
    var numi = document.getElementById('theValue2'); 
    var num = (document.getElementById('theValue2').value -1 + 2); 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'SQLphoneDiv'+num+''; 
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = '<input type=hidden id=' +num+ ' value=' +num+ '><a   href="javascript:removeSQL('+divIdName+')">Remove</a> $insert_phone = "INSERT INTO phone (Phone_Cust_ID,Phone_Numb,Ext) VALUES (\'$cust_ID[0]\',\'".$_POST[\'phone' +num+ '\']."\',\'".$_POST[\'ext' +num+ '\']."\')"; $add_phone = mysql_query($insert_phone);'; 
    ni.appendChild(newdiv); 
    } 


    //// 
    //-------------Remove Phone Form---------------- 
    //// 

    function remove(xy) { 
    var ni = document.getElementById('phoneDiv'); 


    ni.removeChild(xy); 

    } 


    //// 
    //-------------Remove Phone SQL---------------- 
    //// 

    function removeSQL(yz) { 
    var ni = document.getElementById('SQLphoneDiv'); 
    ni.removeChild(yz); 

    } 

私の代わりに2のひとつremove関数を使用する、または最初のremove関数が第二の引き金作ってみましたが、私はこの問題は、私が上の+ divName +情報を得ることができないということだと思います削除しようとしている子のSQL部分。

私はJavaScriptにはとても新しいので、jQueryはこれを行う簡単な方法を持っていると確信していますが、JavaScriptのコンセプトのほとんどをまだ把握しようとしているため、jQueryは今私に混乱しています。 私は得ることができるヒントありがとう。

また、SQLが実際には正しくないことはわかっていますが、今はそのことについて心配していません。この機能が働くと、すべてをきれいにすることができます。

ネイサン

Answer 1

あなたremove機能であなたのaddElement機能次に

newdiv.sqlDivId = sqlDivIdName 

の内側に次のようにして、あなたのphoneDiv要素にSQLphoneDiv要素IDを格納することができ、私は

var sqlDiv = document.getElementById(xy.sqlDivId); 
var sqlNi = document.getElementById('SQLphoneDiv'); 
sqlNi.removeChild(sqlDiv); 

Answer 2

を知っていますかあなたは純粋なJavaScriptソリューションを探していますが、私は参考のためにjQueryソリューションを投稿すると考えていました。 jQueryのを使用している場合とにかくそう...

$(document).ready(function(){ 


}); 

のようにこれは、読み込む何基本的にありません...ドキュメントレディ機能の中にあなたの機能をロードするためのベストプラクティスです。この関数を実行する前に、ドキュメントが完全に読み込まれるのを待ちます。

そこから、あなたはあなたができるリンクを削除するように...

例HTML

<a href="" id="mylink">My Link</a> 

jQueryの

$('#mylink').click(function(){ 

    }); 

そしてなどのクリック機能を行うことができます.remove()を使用してください...そうですね、このように見えるでしょう...

$(document).ready(function(){ 

$('#mylink').click(function(){ 
    $('#mylink').remove(); 
}); 

}); 

そして、あなたがこれを行うことができますワンクリックを使用して複数のIDSを削除する...

$('#mylink, #mylink2, #mydiv').remove(); 

私は、これはあなたが探している答えである疑い。しかし、あなたがjQueryに取り組むことを決定したら、たくさんのコードを使用するために必要なコードの量がどれほど少ないかを知ることを学びます。

Answer 3

長い間、私は見たくありません。 idで要素を削除しますか？ この機能は動作します。

function removeById(id) { 
    var toremoved = document.getElementbyId(id); 
    toremoved.parentNode.removeChild(toremoved); 
}