Html add/removeChild

如果您可以选择进行一点代码重构，我会考虑采用更多的面向对象方法。

这是一个概念验证演示

这是一个更具互动性的概念演示

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

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

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

var travelers = new Array();

有了数组，我们可以很容易地使用JavaScriptPush（）/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结构中查询每个元素，然后删除它。相反，你需要更多的代码分离。还有更好的方法来做这个视图，但这个想法可能有助于让你所做的事情更容易管理。

我也有一种感觉，仅仅替换包装元素的innerHTML可能比调用removeChild()六次更有效，但我怀疑在可能的用例中是否有太多关于最小性能差异的担忧。

如果您要处理更长的列表，那么将主列表存储在数组中也可以更容易地重构代码，以执行类似分页列表的操作。

编辑

如果我误解了你所说的"最近的旅行者"的意思，你的意思是你要做更多的FIFO堆栈，你可以使用shift()而不是pop()来从数组中删除第一个家伙，而不是添加到数组中的最后一个家伙。

我希望这能有所帮助！

干杯！

您是否试图删除以下元素？

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

}

来源：按id 删除元素

奖金：如果您想提高一点效率，可以将所有"get-element-by-id"语句移到If语句块中，因为它们只在traveler_count>1的情况下使用。

为什么不使用原始父级？

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是正确的，否则它将抛出一个与未定义的函数调用相关的错误。

下面是一个如何实现这一点的伪示例：

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