1

私が抱えている奇妙な問題について、特に質問は見つかりません。基本的に、ユーザーの電話番号と内線番号を入力するためのフォームを設定しました。フォームに電話/内線番号を追加できるように、[追加]ボタンを作成しました。フォームとSQLコードで追加が正常に機能しています。問題は、フォームとSQLコードを削除することです。コードを見ると、新しいエントリごとに、その特定のエントリのDIV情報を保持する独自の「削除」リンクがあることがわかります。そしてそれはそれを取り除く「削除」機能に行きます。フォームでは正常に機能しますが、SQLコードでは何もしません。SQLコードに似たものを作成したので、それを削除する関数があります。そして、テストするために、フォームと同じ「削除」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つではなく1つのremove関数を使用するか、最初のremove関数で2番目のremove関数をトリガーしようとしましたが、問題は、子のSQL部分の+divName+情報を取得できないことだと思います。 m削除しようとしています。

私はJavaScriptに非常に慣れていないので、jQueryにはこれを行う非常に簡単な方法があると確信していますが、JavaScriptだけでほとんどの概念を理解しようとしているので、jQueryは今のところ混乱しています。私が得ることができるどんなヒントにも感謝します。

また、SQLが実際には正しくないことはわかっていますが、現時点では心配していません。この関数が機能するようになったら、すべてをクリーンアップできます。

ネイサン

4

3 に答える 3

0

addElement関数内で次のように実行することにより、SQLphoneDiv要素IDをphoneDiv要素に格納できます。

newdiv.sqlDivId = sqlDivIdName

次に、remove関数で実行します

var sqlDiv = document.getElementById(xy.sqlDivId);
var sqlNi = document.getElementById('SQLphoneDiv');
sqlNi.removeChild(sqlDiv);
于 2012-04-06T19:08:59.937 に答える
0

あなたが純粋な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();
});

});

そして、ワンクリックで複数のIDを削除するには、これを行うことができます...

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

これがあなたが探している答えではないかと思います。ただし、jQueryに取り組み始めることにした場合は、多くのコードを取得するために使用するコードがどれだけ少ないかを理解することができます。

于 2012-04-06T19:22:27.847 に答える
0

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

function removeById(id) {
    var toremoved = document.getElementbyId(id);
    toremoved.parentNode.removeChild(toremoved);
}
于 2012-04-06T19:24:16.717 に答える