Удаление нескольких элементов Div сразу - JavaScript

Question

Я не нахожу никакого вопроса конкретно с нечетной проблемой, которую у меня есть. В основном у меня есть форма, настроенная для ввода номера телефона пользователя и расширения. Я создал кнопку «Добавить», чтобы добавить в форму больше телефонов и расширений. У меня есть добавление, работающее отлично в форме, а также для кода SQL. Проблема заключается в удалении формы и кода SQL. Вы можете видеть в коде, что каждая новая запись имеет свою собственную ссылку «Удалить», которая содержит информацию DIV для этого конкретного. И он переходит к функции «удалить», которая вынимает этот. Он отлично работает для формы, но он не делает ничего для кода SQL. Я создал что-то подобное для кода SQL, поэтому у меня есть функция, которая удалит ее. И просто для проверки я помещаю в ту же «Удалить» href, что и формы, и если я нажму ссылку на часть SQL, она ее удалит. Итак, я пытаюсь найти способ щелкнуть ссылку «Удалить» в части формы и вывести ее из этой конкретной формы и соответствующего кода SQL. Я играл с идеей попытаться захватить имя из формы DIV, которая соответствует имени DIV части SQL, но я не могу заставить ее работать.

//// 
    //-------------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

Вы можете хранить идентификатор элемента SQLphoneDiv в вашем элементе phoneDiv, выполнив следующие действия внутри addElement функции

newdiv.sqlDivId = sqlDivIdName 

Затем в remove функции делают

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); 
}