javascript - HTML add/removeChild

这是我的密码。此javascript函数应删除最新的traveler（traveler\u count在1之前初始化，add\u traveler按钮在单击时也会更新count+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;
        }

    }

最佳答案

如果你可以选择做一点代码重构，我会考虑做一点面向对象的方法。
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（）函数创建后进先出堆栈。然后，这些函数可以直接绑定到按钮事件。

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

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

这样，您只需要一个方法来呈现您的视图（html）。它看起来是你的using标签，你仍然可以使用，但我写这个例子只是为了呈现一个列表。您可以根据需要简单地修改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()从数组中删除第一个家伙，而不是最后一个添加到数组中的家伙。
我希望这能有帮助！
干杯！