Question

我试图在我的应用程序上创建一个允许用户输入名称和地址的表单。一旦用户输入信息，我需要验证并添加一个数组以提交给php函数。在我们提交之前，我希望允许用户删除和修改他们提交的内容。

现在我可以将数据添加到数组中，但我很难删除数组中的元素。如何为按钮值指定数组的索引值。我知道{for循环的每次迭代都会重新分配$('#Delete').val(i);，但我不知道还能做什么。

另外，我仍然是新手JavaScript。如果您看到更好的方法（最有可能的话），请告诉我。

＆＃13;

$(document).ready(function() {

  var ItemArray = [];//Initialize array
  
  $("button").click(function() {
  
    $("#results").empty();//Clear results div
    
    //Add form data to array
    ItemArray.push({
      FirstName: $('#FirstName').val(),
      LastName: $('#LastName').val(),
    });

		//iterate through array to display array values
    for (i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name


      $("#results").append('<button id="Delete" value="">Delete</button><br>');//add delete button

      $('#Delete').val(i);//set delete button value

    }


  });

  //Delete
  $("#results").on("click", "#Delete", function() {

		//Delete selected index from array
    ItemArray.splice($('#Delete').val(), 1);
    
		//clear div
    $("#results").empty;
    
		//iterate through array to display array values
    for (i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name


      $("#results").append('<button id="Delete" value="">Delete</button><br>');//add delete button

      $('#Delete').val(i);//set delete button value

    }
  });
});

＆＃13;

<form action="">
  First name:
  <input id="FirstName" type="text" name="FirstName" value="Mickey">
  <br> Last name:
  <input id="LastName" type="text" name="LastName" value="Mouse">
  <br>
</form>

<button>Submit</button>

<div id="results"></div>

＆＃13;

Answer 1

将HTML附加到div元素中，以便更容易找到/删除div元素。

每个iterate操作都没有ItemArray add/remove数组。

使用.delete代替#delete（id），因为您不应该有多个元素具有相同的id属性值。

使用data-index属性获取当前点击元素的index。

试试这个：

$(document).ready(function() {
  var ItemArray = [];
  $("#submit").click(function() {
    ItemArray.push({
      FirstName: $('#FirstName').val(),
      LastName: $('#LastName').val(),
    });
    $("#results").append('<div>' + $('#FirstName').val() + " " + $('#LastName').val() + " " + '<br><button class="delete" data-index="' + (ItemArray.length - 1) + '">Delete</button><br></div>');
  });
  $("#results").on("click", ".delete", function() {
    ItemArray.splice($(this).data('index'), 1);
    $(this).closest('div').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="">
  First name:
  <input id="FirstName" type="text" name="FirstName" value="Mickey">
  <br>Last name:
  <input id="LastName" type="text" name="LastName" value="Mouse">
  <br>
</form>
<button id='submit'>Submit</button>
<hr/>
<div id="results"></div>

Fiddle here

Answer 2

如何为每个名称和按钮组合设置一个包装器？你不必在JS中维护一个数组，你可以将所有模式存储在DOM中，并在需要时从中读取。像这样：

 $('#submit').on('click',function(){
     var record = "<div class='record'>" +
                       "<span class='name'>....</span><button class='delete'>delete</div>" + 
                  "</div>";

    $('#result').append(record);


 })//adding name&button

 $('.delete').on('click',function(){
     var $this = $(this);
     $this.closest('.record').remove();
 })// delete a record.


function getArray(){

  var ItemArray;
  $.each($('.record'),function(index,record){
      ItemArray.push(.....)


   })
  return ItemArray;
}//read from DOM

Answer 3

采用新方法，尝试这样。我使用Object代替Arrays

＆＃13;

  $(document).ready(function() {
    var itemsObj;

    $("button").click(function() {
      $("#results").empty();
      itemsObj = {
        FirstName: $('#FirstName').val(),
        LastName: $('#LastName').val()
      };
      for (var property in itemsObj) {
        $("#" + property).after('<a href="#" class="delete" id="' + property + '" value="">Delete ' + itemsObj[property] + '</a><br>'); //add delete button
      }
    });

    $("#frm").on('click', '.delete', function() {
      var idEle = this.id;
      $('#' + idEle).val('');
      $(this).remove();
      delete itemsObj[idEle];
      console.log(itemsObj);
    });

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="" id='frm'>
  First name:
  <input id="FirstName" type="text" name="FirstName" value="Mickey">
  <br>Last name:
  <input id="LastName" type="text" name="LastName" value="Mouse">
  <br>
</form>

<button>Submit</button>

＆＃13;

Answer 4

保持逻辑完整我已更新您的代码，请检查https://jsfiddle.net/r4qufcfg/

修改后的jQuery

$(document).ready(function() {

  var ItemArray = [];//Initialize array

  $("button").click(function() {

    $("#results").empty();//Clear results div

    //Add form data to array
    ItemArray.push({
      FirstName: $('#FirstName').val(),
      LastName: $('#LastName').val(),
    });

        //iterate through array to display array values
    for (var i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name


      $("#results").append('<button class="Delete" value="'+i+'">Delete</button><br>');//add delete button

    }


  });

  //Delete
  $("#results").on("click", ".Delete", function() {

        //Delete selected index from array
    ItemArray.splice($(this).val(), 1);

        //clear div
    $("#results").empty();

        //iterate through array to display array values
    for (i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name

                 $("#results").append('<button class="Delete" value="'+i+'">Delete</button><br>');//add delete button


    }
  });
});

Answer 5

如果您不想偏离原始代码，可以像这样修改代码：

$(document).ready(function() {

  var ItemArray = []; //Initialize array

  $("button").click(function() {

  $("#results").empty(); //Clear results div

  //changed it a little bit, refactor according to your
 //requirements.
//Add form data to array, use splice for bulk pushing
  ItemArray.splice(0, 0, {
    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val()
  }, {
    Address: $('#Address').val(),
    Country: $('#Country').val()
  }, {
    Type: $('#Type').val()
  });

  //iterate through array to display array values
 //Homework: Wrap this block in a function
 /****************/
 for (i = 0; i < ItemArray.length; i++) {

   var keysArray = Object.keys(ItemArray[i]);
   var valueToAppend = "";
   for (var m = 0; m < keysArray.length; m++) {
     valueToAppend += ItemArray[i][keysArray[m]] + " ";
    //Homework(optional): Add the space between " " based 
    //on codition of not last entry in keysArray or there 
    //is more than single item in keysArray. 
    //Hint: use ternary operator
   }
  /**********************/

   $("#results").append(valueToAppend + " <br>"); 

  //id must be unique so use class instead of id in button 
  //set value of button while appending it 
  $("#results").append('<button class="Delete" value="' + i + '">Delete</button><br>'); //add delete button
}
});

//Delete
$("#results").on("click", ".Delete", function() {

  //Delete selected index from array
  //use 'this' not $('.Delete'), using $('.Delete') will
 //target the first of its kind in the DOM every time
 ItemArray.splice($(this).val(), 1);
 console.log(ItemArray);

 //Tip: Don't Redraw i.e. empty and refill $('#result') on every
 //delete. Just delete the desired node from DOM using code end 
 //alter your array. As **Rayon Dabre** suggested wrap the elements
 //inside a div

 //clear div
 //correct this in your code it is written as .empty instead
 //of .empty()
 $("#results").empty();

 //iterate through array to display array values
 //same as above
 for (i = 0; i < ItemArray.length; i++) {

   var keysArray = Object.keys(ItemArray[i]);
   var valueToAppend = "";
   for (var m = 0; m < keysArray.length; m++) {
    valueToAppend += ItemArray[i][keysArray[m]] + " ";
   }

   $("#results").append(valueToAppend + " <br>")

   $("#results").append('<button class="Delete" value="' + i + '">Delete</button><br>'); //add delete button
 }
});
});

HTML

<form action="">
  First name:
  <input id="FirstName" type="text" name="FirstName" value="Mickey">
  <br> Last name:
  <input id="LastName" type="text" name="LastName" value="Mouse">
  <br> Address:
  <input id="Address" type="text" name="Address" value="Disneyland">
  <br>Country:
  <input id="Country" type="text" name="Country" value="USA">
  <br> Type:
  <input id="Type" type="text" name="Type" value="Cartoon-Character">
  <br>
</form>

<button>Submit</button>

<div id="results"></div>

See this working

jQuery - 通过按钮值传递变量

5 个答案: