Javascript Html添加/删除child

这是我的密码。此javascript函数应删除最近的traveler（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; 
        }

    }

---

为什么不使用原始父母

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

下面是一个虚拟示例，说明如何实现此目标：

//纯JS-查找所有ID匹配且以“trip\u member\u first\u name”开头的节点
var nodes=document.queryselectoral（“[id*=trip\u member\u first\u name]”），
最后麻木，
麻木的，
最后指数；
对于（var i=0，len=nodes.length；i您是否正在尝试删除以下元素

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



}

资料来源：

奖金：
如果你想更高效一点，你可以把所有的“get id”元素移到if语句块中，因为它们只在旅行者计数> 1的情况下使用。
 如果你有选择做一点代码重构的话，我会考虑做一个面向对象的方法。



首先，我将创建一个Traveler对象，它将包含您的Traveler信息

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）的方法。它显示您正在使用标签，您仍然可以使用标签，但我编写的这个示例只是呈现列表。您可以根据需要修改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>";
}

//显示旅行者
函数renderTravelers（）{
var htmlist=“”；
var arrayLength=行程长度；
对于（变量i=0；i”+
旅行者[i].名字+“”+
旅行者[i]。姓氏+“”+
旅行者[我].电话+
“”
}
htmlList=“
”+htmlList+”
”；
htmlList+=“旅行者数量：“+arrayLength+”；
document.getElementById（“输出”）.innerHTML+=htmlist+“
”；
}

由于您将旅行者保留在一个数组中，因此只需使用
.length
属性即可获得所需显示或业务逻辑的当前旅行者数量

如果您想进行额外的步骤，可以考虑使用像KokOutt、En烬或anguljs这样的数据绑定框架。
这种概念验证代码的好处是，您不必不断地查询每个元素的DOM结构，然后将其删除。相反，您要求对代码进行更多的分离。还有更好的方法来进行查看，但这一想法可能有助于使您所做的事情更易于管理

我还感觉到，仅仅替换包装元素的innerHTML可能比调用
removeChild（）
六次更有效，但我怀疑对于可能的用例来说，是否有太多的考虑来最小化性能差异

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

编辑

如果我误解了你所说的“最近的旅行者”的意思，你的意思是你做了更多的FIFO堆栈，你可以使用
shift（）
而不是
pop（）
从数组中删除第一个人，而不是最后添加到数组中的人

我希望这有帮助

干杯！
我可以使用任何语言您的DOM是什么样子的？