javascript - 如何在 javascript 中创建删除/删除功能按钮？可以删除元素的按钮

Question

我有一个 HTML 格式的表单。这是我的代码:

    <div id="format">
         <form id="myForm" onsubmit="myForm(event)">
         <b>Name:</b></br>
         <input type="text" name="name" id="name"  required="required" ></input></br>
         <b>Phone Number:</b></br>
         <input type="phone" name="phone" id="phone"  required="required" ></input></br>
        <b>Birthday:</b></br>
        <input type="date" name="bday" id="bday" required="required" ></input></br>
        <b>Email:</b></br>
        <input type="email" name="email" id="email"  required="required" ></input></br>
        <b>Password:</b></br>
        <input type="password" name="pWord" id="pWord" required" ></input></br>
        <button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>

    </form>
        <div id="sample"></div>
</div>

这是我的 Javascript 代码。在此代码中，当我从 html 触发提交按钮时，它将显示用户信息并为每个用户提交的信息附加一个 div。

var data = [];
var i, item;

function myForm(event){
    event.preventDefault();
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var bday = document.getElementById("bday").value;
    var email = document.getElementById("email").value;
    var pWord = document.getElementById("pWord").value;
    var age = document.getElementById("bday").value;
    var ageValue;




    var Bdate = document.getElementById("bday").value;
    var Bday = +new Date(Bdate);
    ageValue = ~~ ((Date.now() - Bday) / (31557600000));
    var theBday = document.getElementById("age");
    theBday.innerHTML = ageValue;


    var userObject = {
        name: name,
        phone: phone,
        bday: bday,
        email: email,
        pWord: pWord,
        ageValue: ageValue,

    };
       data.push(userObject);

        document.getElementById("sample").innerHTML = ""; //Prevents duplicate
        for (var i=0 ; i <data.length ; i++){
            var theDiv ;
            var container ;
            var button;

            theDiv = document.createElement( "div" );
            button = document.createElement( "button");
            button.setAttribute("id", "remove");
            button.remove(sample);
            theDiv.style = "background-color:pink; border-style:solid; margin:1%;";

            for (item in data[i]) {
                var x = item + ":" + data[i][item] + "</br>" ;              

                theDiv.innerHTML += item + ":" + data[i][item] + "</br>" ;

            }
            button.innerHTML += "Remove";   
            button.style = "background-color:maroon; color:white;"; 

            container = document.getElementById( "sample" );
            container.appendChild( theDiv );
            theDiv.appendChild (button);
        }


    console.log(data);

}

我想为每个附加的 div 创建一个按钮。该按钮将具有删除按钮所属的整个div的功能。

Answer 1

从列表中正确删除对象的一个​​相当简单的算法是提供一个 data- attribute value在每个删除按钮上给出其在数据数组中的原始索引。 (下面使用的属性名称是data-index)。

然后把添加对象的内联代码拿出来，变成三个函数来

• (重新)绘制保存在data 数组中的所有 对象。
• 将单个对象添加到data 并重绘所有对象。
• 从数据数组中删除一个对象(编码为删除按钮 onclick 处理程序)并重绘所有对象。

代码已经在添加新对象时重绘了所有对象，因此在删除对象时重绘所有对象使其保持在同一级别的简单性。

---

简化形式的示例代码:

"use strict";
var data = [];

function myFormData(event){

    // halper functions
    function addData( userObject) {
        data.push(userObject);
        redrawList();
    }
    function removeData( event) {
       var index = this.getAttribute("data-index");
       data.splice( index,1);
       redrawList();
    }
    function redrawList() {
        var container = document.getElementById( "sample" );
        container.innerHTML = ""; // reset list displayed on page
        for (var index=0 ; index <data.length ; index++){
            var theDiv = document.createElement( "div" );
            var divHTML = "";
            var button = document.createElement( "button");
            var userObject = data[index];

            for( var item in userObject) {
                if( !userObject.hasOwnProperty( item)) {
                     continue; // ignore inherited properties
                }
                divHTML +=  item + ":" + userObject[item] + "</br>" ;
            }
            theDiv.innerHTML = divHTML;
            theDiv.style = "background-color:pink; border-style:solid; margin:1%;";
            button.type="button";
            button.setAttribute("data-index", index);
            button.innerHTML = "remove";
            button.style = "background-color:maroon; color:white;";
            button.onclick=removeData;   
            theDiv.appendChild (button);
            container.appendChild( theDiv );
        }
    }

    //  handle form submit event to add an event
    event.preventDefault();
    // cut down form:
    var name = document.getElementById("name").value;
    var userObject = {
        name: name
    };
    addData( userObject);
    // console.log(data);  // not used in code example
}

<div id="format">
  <form id="myForm" onsubmit="myFormData(event);">
    <b>Name:</b></br>
    <input type="text" name="name" id="name"  required="required" ></input></br>
    <button type="submit" name="submit" id="submit" value="Submit"
      onsubmit="myFormData(event)" >Submit</button>
  </form>
  <div id="sample">
  </div>
</div>

请注意，如果目标浏览器支持 element.dataset，代码会使用 getAttribute("data-index")未知或不存在。函数名称 myForm 和 myData 已更改为 myFormData，因为我认为它们是相同的函数。

可能的问题:现有的清除样本列表防止重复的代码注释是错误的。在示例代码中，多次点击提交按钮添加同一个用户。在将用户添加到列表时，您可以添加一个测试来检查重复的电子邮件地址，但此类代码超出了此问题的范围。您可能还希望考虑在将数据添加到“示例”列表后重置表单。