Html add/removeChild

Question

这是我的代码。这个javascript函数应该删除最近的旅行者（traveler_count被初始化为1，一个add_traveler按钮在被点击时也会更新该计数+1，并且这个函数在点击按钮时执行）。我无法得到它去除最近的旅行者。任何想法如何解决这个问题？

function remove_traveler() 
    { 
     //get most recent add on, removeChild() on lname, fname, phone, lbls associated 

     var recent_traveler_fname = document.getElementById("trip_member_first_name_" + traveler_count); 
     var recent_traveler_lname = document.getElementById("trip_member_last_name_" + traveler_count); 
     var recent_traveler_phone = document.getElementById("trip_member_phone_number_" + traveler_count); 
     var recent_traveler_fname_lbl = document.getElementById("new_traveler_fname_label_" + traveler_count); 
     var recent_traveler_lname_lbl = document.getElementById("new_traveler_lname_label_" + traveler_count); 
     var recent_traveler_phone_lbl = document.getElementById("new_traveler_phone_label_" + traveler_count); 

     var input_area = document.getElementById("new_traveler"); 

     if(traveler_count > 1) 
     { 
      input_area.parentNode.removeChild(recent_traveler_fname); 
      input_area.parentNode.removeChild(recent_traveler_lname); 
      input_area.parentNode.removeChild(recent_traveler_phone); 
      input_area.parentNode.removeChild(recent_traveler_fname_lbl); 
      input_area.parentNode.removeChild(recent_traveler_lname_lbl); 
      input_area.parentNode.removeChild(recent_traveler_phone_lbl); 

      traveler_count = traveler_count - 1; 
     } 

    } 

Answer 1

如果你可以选择做一些代码重构，我会考虑做更多的面向对象的方法。

Here's a proof-of-concept demo

Here's a more interactive concept demo

首先，我将创建一个旅行者的对象将包含您的出行者信息。

function Traveler(firstName, lastName, phone) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
    this.phone = phone; 
} 

然后，我会简单地使用一个数组来存储我的旅行者列表。

var travelers = new Array(); 

通过使用数组，我们可以轻松使用JavaScript Push（）/ Pop（）函数来创建LIFO堆栈。这些功能可以直接绑定到您的按钮事件。

// Add Traveler 
function addTraveler(traveler) { 
    travelers.push(traveler); 
} 

// Remove Traveler (returns the removed traveler) 
function removeTraveler() { 
    return travelers.pop(); 
} 

因此，您所需要的只是一种呈现视图（html）的方法。它看起来是你使用的标签，你仍然可以使用它，但我只是把这个例子写成了一个列表。您可以简单地根据需要修改HTML结构。

// Display Travelers 
function renderTravelers() { 
    var htmlList = ""; 
    var arrayLength = travelers.length; 

    for (var i = 0; i < arrayLength; i++) { 
     htmlList += 
      "<li>" + 
      travelers[i].firstName + " " + 
      travelers[i].lastName + " " + 
      travelers[i].phone  + 
      "</li>" 
    } 
    htmlList = "<ul>" + htmlList + "</ul>"; 
    htmlList += "<em>Number of Travelers: " + arrayLength + "</em>"; 
    document.getElementById("output").innerHTML += htmlList + "<hr>"; 
} 

既然你保持你的旅客一个数组，你可以简单地使用.length属性来获取你需要的任何显示器或业务逻辑旅客的当前数量。

如果您想要进行额外的步骤，您可以考虑使用像Knockout，Ember或AngularJS这样的数据绑定框架。

这个概念验证代码的好处是，你不是经常查询每个单独元素的DOM结构，然后删除它。相反，你恳求更多的代码分离。还有更好的方法来做这个视图，但这是一个想法，可以帮助你做更容易管理的事情。

我也有一种感觉，只是更换wrapper元素的innerHTML可能比调用removeChild()六次效率更高，但我怀疑对于可能的用例最小的性能差异非常关注。

如果您打算处理更长的列表，那么将您的主列表存储在数组中还可以让您更轻松地重构代码以执行类似分页列表的操作。

编辑

如果我误解你的“最新旅行者”的意思是什么，你的意思是你做的更多的是FIFO堆栈，可以使用shift()而不是pop()从数组中删除的第一个男人，而不是最后加入阵列的人。

我希望有帮助！

干杯！

Answer 2

为什么不使用原始父母？

var removeElement = function(element) { element.parentElement.removeChild(element); }; 
removeElement(document.getElementById("trip_member_first_name_" + traveler_count)); 
removeElement(document.getElementById("trip_member_last_name_" + traveler_count)); 
removeElement(document.getElementById("trip_member_phone_number_" + traveler_count)); 
removeElement(document.getElementById("new_traveler_fname_label_" + traveler_count)); 
removeElement(document.getElementById("new_traveler_lname_label_" + traveler_count)); 
removeElement(document.getElementById("new_traveler_phone_label_" + traveler_count)); 

确保您的ID是正确的，否则它会抛出一个错误相关的函数调用未定义或什么。

Answer 3

这里是一个虚拟的例子，你如何能做到这一点：

// Pure JS - find all nodes with matching ID's that start with "trip_member_first_name_" 
 
var nodes = document.querySelectorAll("[id*=trip_member_first_name_]"), 
 
    lastNumb, 
 
    currentNumb, 
 
    lastIndex; 
 

 
for (var i=0,len=nodes.length;i<len;i++) { 
 
    // A bit limited regex that extracts only the last digits from the ID attribute 
 
    currentNumb = parseInt(nodes[i].getAttribute("id").match(/\d*?$/)); 
 
    if (!lastNumb || lastNumb < currentNumb) { 
 
    lastNumb = currentNumb; 
 
    lastIndex = i; 
 
    } 
 
} 
 
// This will print "2" inside the result as it's 
 
// the highest number of all "trip_member_first_name_" inputs 
 
document.getElementById("result").innerHTML = lastNumb; 
 

 
// So you could just do something like this to remove the last input : 
 
nodes[lastIndex].parentNode.removeChild(nodes[lastIndex]);

<label id="new_traveler_fname_label_0">First Name</label><br> 
 
<input id="trip_member_first_name_0" type="text" /><br> 
 
<label id="new_traveler_lname_label_0">Last Name</label><br> 
 
<input id="trip_member_last_name_0" type="text" /><br> 
 
<label id="new_traveler_phone_label_0">Phone</label><br> 
 
<input id="trip_member_phone_number_0" type="text" /><br> 
 

 
<label id="new_traveler_fname_label_1">First Name</label><br> 
 
<input id="trip_member_first_name_1" type="text" /><br> 
 
<label id="new_traveler_lname_label_1">Last Name</label><br> 
 
<input id="trip_member_last_name_1" type="text" /><br> 
 
<label id="new_traveler_phone_label_1">Phone</label><br> 
 
<input id="trip_member_phone_number_1" type="text" /><br> 
 

 
<label id="new_traveler_fname_label_2">First Name</label><br> 
 
<input id="trip_member_first_name_2" type="text" /><br> 
 
<label id="new_traveler_lname_label_2">Last Name</label><br> 
 
<input id="trip_member_last_name_2" type="text" /><br> 
 
<label id="new_traveler_phone_label_2">Phone</label><br> 
 
<input id="trip_member_phone_number_2" type="text" /><br> 
 

 
<div id="result"></div>

Answer 4

你们是不是要删除以下要素是什么？

recent_traveler_fname 
recent_traveler_lname 
recent_traveler_phone 
recent_traveler_fname_lbl 
recent_traveler_lname_lbl 
recent_traveler_phone_lbl 

如果是的话，下面的修改应该工作：

function remove_traveler() 
{ 
    //get most recent add on, removeChild() on lname, fname, phone, lbls associated 
    var recent_traveler_fname = document.getElementById("trip_member_first_name_" + traveler_count); 
    var recent_traveler_lname = document.getElementById("trip_member_last_name_" + traveler_count); 
    var recent_traveler_phone = document.getElementById("trip_member_phone_number_" + traveler_count); 
    var recent_traveler_fname_lbl = document.getElementById("new_traveler_fname_label_" + traveler_count); 
    var recent_traveler_lname_lbl = document.getElementById("new_traveler_lname_label_" + traveler_count); 
    var recent_traveler_phone_lbl = document.getElementById("new_traveler_phone_label_" + traveler_count); 


    if(traveler_count > 1) 
    { 
     recent_traveler_fname.parentNode.removeChild(recent_traveler_fname); 
     recent_traveler_lname.parentNode.removeChild(recent_traveler_lname); 
     recent_traveler_phone.parentNode.removeChild(recent_traveler_phone); 
     recent_traveler_fname_lbl.parentNode.removeChild(recent_traveler_fname_lbl); 
     recent_traveler_lname_lbl.parentNode.removeChild(recent_traveler_lname_lbl); 
     recent_traveler_phone_lbl.parentNode.removeChild(recent_traveler_phone_lbl); 

     traveler_count = traveler_count - 1; 
    } 



} 

来源： Remove element by id

奖励： 如果你想成为一个小更有效，你可以把所有的“通过id'语句将if元素语句嵌入到if语句块中，因为它们仅在traveler_count> 1的情况下使用。