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，因为我认为它们功能相同。

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

Answer 2

检查fiddler，我已使用单个值＆＃39;名称＆＃39;来实现。

＆＃13;

var data = [];
var i, item;

function myForm(event){
    event.preventDefault();
    var name = document.getElementById("name").value;
   
    var userObject = {
        name: name
        };
       data.push(userObject);

        document.getElementById("sample").innerHTML = ""; //Prevents duplicate
        for (var i=0 ; i <data.length ; i++){
            var theDiv ;
            var container ;
            var button;
            var index;

            theDiv = document.createElement( "div" );
            button = document.createElement( "button");
            index = document.createElement("input");
            index.setAttribute('hidden', 'true');
            button.setAttribute("id", "remove");
            button.setAttribute("onclick", "removeItem(this)");            

            for (item in data[i]) {
            	var x = item + ":" + data[i][item] + "</br>" ;              
                theDiv.innerHTML += item + ":" + data[i][item] + "</br>" ;
                index.value += i; 

            }
            button.innerHTML += "Remove";   
           
            container = document.getElementById( "sample" );
            container.appendChild( theDiv );
            theDiv.appendChild (button);
            theDiv.appendChild(index);
        }
}
function removeItem(event){
	let el = event;
    let index = el.parentNode.lastElementChild.value;
    el.parentElement.remove();
    data.splice(index,1);
}

＆＃13;

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

＆＃13;

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

2 个答案: