2015-02-11 2 views
0

Я работаю над динамическим флажком, где я могу добавить и удалить, например. пользователи. Добавление работает нормально, но для устранения всех проблем с дочерними элементами. Особенно я не знаю, как удалить.удалить дочерний элемент br

 <style> 
    .container { align:right; border:1px solid #000000; width:300px; height: 100px; overflow-y: scroll;} 
    </style> 
    <script type="text/javascript"> 
    var addTask = function() { 

     var newCheckbox = document.createElement("input"); 
     newCheckbox.type = "checkbox"; 
     newCheckbox.value = document.getElementById("MailAddress").value; 
    newCheckbox.id = "C11"; 
     document.getElementById("UserList").appendChild(newCheckbox); 


     var label = document.createElement('label'); 
     label.htmlFor = document.getElementById("MailAddress").value; 
    label.id = "L11"; 
     label.appendChild(document.createTextNode(document.getElementById("MailAddress").value)); 

     document.getElementById("UserList").appendChild(label); 
     document.getElementById("L11").appendChild(document.createElement("br")); 
    } 

    function delTask() { 

     var item = document.getElementById("C11"); 
     item.parentNode.removeChild(item); 
     var item = document.getElementById("L11"); 
     item.parentNode.removeChild(item); 
     // How can I remove die <br> too? 
    } 
    </script> 
    </head> 
    <body> 


    <header> 
     <p>Usergroup:</p> 
    </header> 
    <input type="text" id="MailAddress"> 
    <input type="submit" value="Add Mail Address" onClick="addTask()" id="AddUser"> 

    <div class="container" id="UserList"></div> 

    <input type="submit" value="Delete One Mail" onClick="delTask()" id="remove"> 

ответ

0

Если удаление <br> является проблемой, то попробуйте это

var e = document.getElementsByTagName("p")[0]; 
e.innerHTML = e.innerHTML.replace('<br>', ''); 
+0

Кажется, работать, здорово и спасибо! Таким образом, TagName («p» ... указывает на это BR? –

+0

Нет, это не указывает на
, это просто заменяет вхождения
пустым пространством. Если оно решит вашу проблему, не забудьте пропустить и пометить ее как правильную ответ – void

0

вы можете использовать document.getElementsByTagName('br'), чтобы получить массив всех br tags, то вы можете удалить бр тег, который вы хотите удалить. Это требует, чтобы вы знали, сколько тегов br находится в вашем документе заранее, чтобы вы удалили тот, у которого есть правильный индекс.

var x = document.getElementsByTagName("br"); 
x[1].parentNode.removeChild(x[1]); 

удалит второй br тег в документе, если у вас есть два br теги, чтобы начать с.

0

Это должно делать то, что вам нужно - это выглядит для элементов с идентификаторами, а затем удаляет каждый последующий узел родственного до элемента (или меток), в отличии от комментариев, текст и т.д.

function delTask() { 
     var el1 = document.getElementById("C11"); 
     var el2 = document.getElementById("L11"); 
     var next = el2.nextSibling; 
     // create array to hold all the elements to be removed 
     var items = [el1, el2, next]; 
     // iterate through siblings until a tag (here <br/>) is found 
     while(next && next.nodeType != 1) { 
      next = next.nextSibling; 
      items.push(next); 
     } 
     // remove elements in reverse order 
     while(var el = items.pop()){ el.parentNode.removeChild(el); } 
     item.parentNode.removeChild(item); 
    } 

Несколько примечаний: вы не должны использовать «var» с той же переменной несколько раз в одном блоке. Идентификаторы (C11, L11) должны быть параметрами, а не жестко заданными значениями.

Смежные вопросы