한 번에 여러 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); 

    } 

내가 대신 두 가지 중 하나에 불과 제거 기능을 사용하거나, 최초의 제거 기능은 두 번째 트리거 만들려고했지만, 나는 문제가 나는에 + divName + 정보를 얻을 수 없다고 생각 제거하려고하는 자식에 대한 SQL 부분.

저는 JavaScript에 익숙하지 않으므로 jQuery는이 작업을 수행하는 아주 간단한 방법이 있지만 jQuery는 JavaScript 혼자서 대부분의 개념을 파악하려고하고 있기 때문에 현재 혼란 스럽습니다. 내가 얻을 수있는 정보를 제공해 주셔서 감사합니다.

또한 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

을 알고 당신은 순수한 자바 스크립트 솔루션을 찾고 있지만, 나는 단지 참조 용으로 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); 
}