Question

在我的Thymeleaf HTML页面中，我有一个动态生成字段的表单。我想添加删除字段的选项。我正在尝试删除包含生成字段的div。

/*<![CDATA[*/

var player1 = /*[[${competitor1.name}]]*/ 'default';
var player2 = /*[[${competitor2.name}]]*/ 'default';

var player1Id = /*[[${competitor1.id}]]*/ 'default';
var player2Id = /*[[${competitor2.id}]]*/ 'default';



var h1 = document.getElementsByTagName('h1')[0],
  start = document.getElementById('start'),
  stop = document.getElementById('stop'),
  clear = document.getElementById('clear'),
  seconds = 0,
  minutes = 0,
  hours = 0,
  t;

function add() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }

  h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

  timer();
}

function timer() {
  clearTimeout(t);
  t = setTimeout(add, 1000);
}



/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
  clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
  h1.textContent = "00:00:00";
  seconds = 0;
  minutes = 0;
  hours = 0;
}

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

var count = 0;


function addFields(type) {

  count = count + 1;


  var container = document.getElementById("container");

  var div = document.createElement("div");
  div.id = count;
  container.appendChild(div);



  div.appendChild(document.createTextNode("Type"));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "eventType";
  input.value = type;
  div.appendChild(input);

  div.appendChild(document.createTextNode("  Timestamp "));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "eventTimestamp";
  input.value = document.getElementById("time").textContent;
  div.appendChild(input);

  var select = document.createElement("select");
  select.name = "eventPlayer";

  var option = document.createElement("option");

  option.value = player1Id;

  option.appendChild(document.createTextNode(player1));
  select.appendChild(option);

  var option = document.createElement("option");
  option.value = player2Id;
  option.appendChild(document.createTextNode(player2));
  select.appendChild(option);

  div.appendChild(select);


  div.appendChild(document.createTextNode("  Details(optional)"));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "eventDescription";
  input.value = " ";
  div.appendChild(input);

  var x = document.createElement("input");
  var child = document.getElementById(count);


  x.type = "button";
  x.value = "test";
  x.onclick = "delete_row(container, child)";
  div.appendChild(x);
  div.appendChild(document.createElement("br"));



}

function delete_row(container, child) {
  container.removeChild(child);
}

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Match</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />


</head>

<body>
  <p th:text="'Match of ' + ${competitor1.name} + ' and ' + ${competitor2.name}" />
  <p id="demo"></p>

  <table>

    <tr>
      <th>
        <p th:text="${competitor1.name}" />
      </th>
      <th>
        <h1 id="time"><time>00:00:00</time></h1>
        <button id="start">start</button>
        <button id="stop">stop</button>
        <button id="clear">clear</button>
      </th>
      <th>
        <p th:text="${competitor2.name}" />
      </th>
    </tr>
    <tr>
      <td>
        <button onclick="addFields('Ippon')">Ippon!</button>
      </td>
      <td>

      </td>
      <td>
        <button onclick="addFields('Ippon')">Ippon!</button>
      </td>
    </tr>
    <tr>
      <td>
        <button onclick="addFields('Wazari')">Wazari</button>
      </td>
      <td>

      </td>
      <td>
        <button onclick="addFields('Wazari')">Wazari</button>
      </td>
    </tr>
    <tr>
      <td>
        <button onclick="addFields('Shido')">Shido</button>
      </td>
      <td>

      </td>
      <td>
        <button onclick="addFields('Shido')">Shido</button>
      </td>
    </tr>
    <tr>
      <td>
        <button onclick="addFields(' ')">Event</button>
      </td>
      <td>

      </td>
      <td>
        <button onclick="addFields(' ')">Event</button>
      </td>
    </tr>

  </table>
  <br/>

  <a href="#" id="filldetails" onclick="addFields()" class="btn btn-default">Add event</a>

  <!-- <form action="#" th:action="@{/competition/save}" th:object="${event}" method="post"> -->
  <form action="/competition/save" method="post">
    <div id="container"></div>
    <select name="victor">
	     <option th:value="${competitor1.id}" th:text="${competitor1.name}" ></option>
 	  	 <option th:value="${competitor2.id}" th:text="${competitor2.name}" ></option>
 	 </select>
    <input type="hidden" name="loser" th:value="${competitor1.id} +'_'+${competitor2.id}" />
    <input type="hidden" name="competition" th:value="${competitionId}" />
    <input type="submit" value="Submit">
  </form>


</body>

<script th:inline="javascript">
</script>

</html>

名为test的按钮尝试使用delete_row函数删除div。正如您所看到的，单击“添加事件”时会添加一行字段。我希望每行字段都是可删除的。

Answer 1

这应该可以帮到你。像这样在JavaScript代码中定义一个事件监听器。

inspector

请注意，我已替换... x.type ="button"; x.value ="test"; x.addEventListener('click', ()=>{ delete_row(container, child); }) ...。您需要将其替换为我在x.onclick添加的内容。

这样做是因为为了让HTML按钮知道点击它时该做什么，我们必须为它提供一个事件监听器。更具体地说，是事件的名称（在我们的例子中是x.addEventListener），然后是要运行的相应函数click。

以下是修改过的JavaScript的完整副本供您参考。

delete_row(container, child)

JavaScript - 动态删除元素的按钮

1 个答案: