训练图表项目删除错误答案

【问题标题】：Train chart item removal bug训练图表项目删除错误
【发布时间】：2019-03-18 19:40:48
【问题描述】：

我正在尝试制作一个简单的程序：从一组火车对象中获取一堆项目并将它们打印到图表上，其中包含有关火车的信息（名称、目的地等）以及一个按钮从列表中删除一列火车。这很好用，除了当我添加另一列火车并单击提交按钮时，删除按钮不再起作用。删除功能甚至不会触发。什么交易？

//PROBLEMS:
//-Nothing can be deleted after submit is clicked

     var Thomas = {
  name: "Thomas",
  dest: "New York",
  first: "05:00",
  freq: 30,
}

 var Duncan = {
  name: "Duncan",
  dest: "Boston",
  first: "06:00",
  freq: 45,
}

var trains = [Thomas, Duncan];

//now make this a function?

function printTrains(){
for (i = 0; i < trains.length; i++)
{


// $("table").append("<tr id ='train" + i + "'></tr>");

$("table").append("<tr id ='train" + i + "'>");



 $("#train" + i).append("<td>" + trains[i].name + "</td>");

$("#train" + i).append("<td>" + trains[i].dest + "</td>");

 var tFrequency = trains[i].freq;
 $("#train" + i).append("<td>" + tFrequency + "mins" + "</td>");



    var firstTime = trains[i].first;



    var firstTimeConverted = moment(firstTime, "hh:mm").subtract(1, "years");


    // Current Time
    var currentTime = moment();



    var diffTime = moment().diff(moment(firstTimeConverted), "minutes");



    var tRemainder = diffTime % tFrequency;



    var tMinutesTillTrain = tFrequency - tRemainder;
    $("#train" + i).append("<td>" + tMinutesTillTrain + "</td>");



    var nextTrain = moment().add(tMinutesTillTrain, "minutes");
    $("#train" + i).append("<td>" + moment(nextTrain).format("hh:mm") + "</td>");

    $("#train" + i).append("<td><button class = 'remove' id = '" + i + "'>x</button></td></tr>")
}
}

printTrains();

$(".remove").click(function(event){

$("#train" + this.id).remove();

//code for removing from array:
trains.splice(this.id, 1);
//ef yeah!  It worked!!

console.log("Removing train");
})


$("#submit").click(function(event){
  event.preventDefault();



  $($("td").parent()).remove();



console.log("you clicked me");


var newName = $("#name").val();
var newDest = $("#dest").val();
var newFirst = $("#firstTT").val();
var newFreq = $("#freq").val();
var newFirstConverted = moment(newFirst, "hh:mm").subtract(1, "years");
var newDiffTime = moment().diff(moment(newFirstConverted), "minutes");
var newRemainder = newDiffTime % newFreq;
var newMinAway = newFreq - newRemainder;
var newNextArr = moment().add(newMinAway, "minutes");


console.log("New first converted:" + newFirstConverted);





if (parseFloat(newFreq) * 0 == 0 && moment(newFirst, 'hh:mm', true).isValid())
{
var newTrain =
{
  name: newName,
  dest: newDest,
  first: newFirst,
  freq: newFreq,
  nextArr: newNextArr,
  minAway: newMinAway
}
trains.push(newTrain);

console.log(trains);

//TRAIN SOUND
 var trainSound = new Audio("train.wav");
  trainSound.volume = 0.2;

   trainSound.play();

  console.log("Playing train");

//*******
}
else if (moment(newFirst, "hh:mm", true).isValid() == false)
{
  alert("Must enter First Train Time in correct format");
}
else
{
  alert("Must enter number for frequency")
}

printTrains();


})

这是我的 HTML 代码：

   <!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <style> 

  #submit {
    margin: 5px;
  }

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

  body{
  background: url(background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  </style>
</head>

<!-- WHY IS MY PAGE LOPSIDED
LOOK UP INSTRUCTIONS FOR DEPLOYMENT -->
<body>

<table>
  <tr>
    <th>Train Name</th>
    <th>Destination</th>
    <th>Frequency</th>
    <th>Minutes Away</th>
    <th>Next Arrival</th>
  </tr>

</table>



<hr>
 <form>
  Train Name: <input type="text" id="name">
  <br>
  <br>
  Destination: <input type = "text" id="dest">
  <br>
  <br>
  First Train Time (HH:mm - military time): <input type="text" id="firstTT">
  <br>
  <br>
  Frequency: Min <input type = "text" id = "freq">
  <br>
  <br>
  <input type="submit" id ="submit">


 </form>

     <script src = "train.js">
    </script>


  </body>
  </html>

【问题讨论】：

我认为您错过了粘贴 HTML 代码
有效点，让我编辑

标签： javascript jquery html button html-table

【解决方案1】：

当您第一次加载页面时，您在元素上设置点击处理程序：

$(".remove").click(function(event){/* etc */}

但是当您在添加新火车后重新创建表时，您不会添加点击处理程序。这些是新元素，因此您需要这样做。下面我将代码放在函数addRemove 中，然后在printTrains 中调用。

附带说明，您可能会考虑向表中添加删除行，而不是每次都重新制作。然后，您可以在创建新行时将点击处理程序添加到新行。

//PROBLEMS:
//-Nothing can be deleted after submit is clicked

var Thomas = {
  name: "Thomas",
  dest: "New York",
  first: "05:00",
  freq: 30,
}

var Duncan = {
  name: "Duncan",
  dest: "Boston",
  first: "06:00",
  freq: 45,
}

var trains = [Thomas, Duncan];

//now make this a function?

function printTrains() {
  for (i = 0; i < trains.length; i++) {

    $("table").append("<tr id ='train" + i + "'>");

    $("#train" + i).append("<td>" + trains[i].name + "</td>");

    $("#train" + i).append("<td>" + trains[i].dest + "</td>");

    var tFrequency = trains[i].freq;
    $("#train" + i).append("<td>" + tFrequency + "mins" + "</td>");

    var firstTime = trains[i].first;
    var firstTimeConverted = moment(firstTime, "hh:mm").subtract(1, "years");
    // Current Time
    var currentTime = moment();
    var diffTime = moment().diff(moment(firstTimeConverted), "minutes");
    var tRemainder = diffTime % tFrequency;
    var tMinutesTillTrain = tFrequency - tRemainder;
    $("#train" + i).append("<td>" + tMinutesTillTrain + "</td>");
    var nextTrain = moment().add(tMinutesTillTrain, "minutes");
    $("#train" + i).append("<td>" + moment(nextTrain).format("hh:mm") + "</td>");
    $("#train" + i).append("<td><button class = 'remove' id = '" + i + "'>x</button></td></tr>")
    addRemove()
  }
}

printTrains();
addRemove();

function addRemove() {
  $(".remove").click(function(event) {
    $("#train" + this.id).remove();
    //code for removing from array:
    trains.splice(this.id, 1);
    //ef yeah!  It worked!!  
    console.log("Removing train");
  })
}


$("#submit").click(function(event) {
  event.preventDefault();
  $($("td").parent()).remove();
  console.log("you clicked me");

  var newName = $("#name").val();
  var newDest = $("#dest").val();
  var newFirst = $("#firstTT").val();
  var newFreq = $("#freq").val();
  var newFirstConverted = moment(newFirst, "hh:mm").subtract(1, "years");
  var newDiffTime = moment().diff(moment(newFirstConverted), "minutes");
  var newRemainder = newDiffTime % newFreq;
  var newMinAway = newFreq - newRemainder;
  var newNextArr = moment().add(newMinAway, "minutes");

  console.log("New first converted:" + newFirstConverted);

  if (parseFloat(newFreq) * 0 == 0 && moment(newFirst, 'hh:mm', true).isValid()) {
    var newTrain = {
      name: newName,
      dest: newDest,
      first: newFirst,
      freq: newFreq,
      nextArr: newNextArr,
      minAway: newMinAway
    }
    trains.push(newTrain);

    console.log(trains);

    //TRAIN SOUND
    var trainSound = new Audio("train.wav");
    trainSound.volume = 0.2;
    trainSound.play();
    console.log("Playing train");
    //*******
  } else if (moment(newFirst, "hh:mm", true).isValid() == false) {
    alert("Must enter First Train Time in correct format");
  } else {
    alert("Must enter number for frequency")
  }

  printTrains();

})

#submit {
  margin: 5px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  background: url(background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table>
  <tr>
    <th>Train Name</th>
    <th>Destination</th>
    <th>Frequency</th>
    <th>Minutes Away</th>
    <th>Next Arrival</th>
  </tr>
</table>
<hr>
<form>
  Train Name: <input type="text" id="name">
  <br>
  <br> Destination: <input type="text" id="dest">
  <br>
  <br> First Train Time (HH:mm - military time): <input type="text" id="firstTT">
  <br>
  <br> Frequency: Min <input type="text" id="freq">
  <br>
  <br>
  <input type="submit" id="submit">
</form>

<script src="train.js">
</script>

【讨论】：

它在这个 sn-p @DennisM 中为我工作。当你说它不起作用时，你的意思是当你运行sn -p时它不起作用？
哦，等等，我收回了它，它确实有效。但是现在我注意到另一个错误......不确定它以前是否存在，但是当我尝试制作第二列新火车时，它会删除第一列新火车。但在那之后我可以继续制作新的火车。
不过，你给了我想要的答案。谢谢。
祝你好运@DennisM。到目前为止看起来不错。