Как создать кнопку удаления / удаления в 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- значения атрибута для каждого основания удаления, которое дает свой индекс original в массиве данных.(Имя атрибута, используемое ниже: data-index).

Затем возьмите встроенный код, который добавляет объекты, и превратите его в три функции для

• (пере) рисования все объекты, хранящиеся в массиве data.
• добавляют один объект к data и перерисовывают все объекты.
• удалить объект из массива данных (закодированный как кнопка удаления * обработчик 1020 *) и перерисовать все объекты.

Код уже перерисовывает все объекты при добавлении нового объекта.добавлено, поэтому перерисовка всего при удалении объекта сохраняет его на том же уровне простоты.

---

Пример кода для упрощенной формы:

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

Обратите внимание, что код использует getAttribute("data-index") в случае, если поддержка целевого браузера для element.dataset неизвестна или отсутствует.Имена функций myForm и myData были изменены на myFormData, так как я предполагаю, что они являются одной и той же функцией.

Вероятная проблема: существующий кодовый комментарий, который очищает список примеров, предотвращает дублирование, является неправильным.В примере кода, нажав кнопку «Отправить» несколько раз, вы добавляете одного и того же пользователя.Вы можете добавить тест для проверки дубликатов адресов электронной почты при добавлении пользователя в список, но такой код выходит за рамки этого вопроса.Вы также можете рассмотреть возможность сброса формы после добавления данных в список «примеров».

Answer 2

проверьте скрипач , я реализовал с одним значением 'name'.

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

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