JavaScript - 动态删除元素的按钮

问题描述 投票：-1回答：1

在我的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。正如您所看到的，单击“添加事件”时会添加一行字段。我希望每行字段都是可删除的。

javascript html
1个回答
1
投票

这应该为你做的伎俩。像这样在JavaScript代码中定义一个事件监听器。

            ...
            x.type ="button";
            x.value ="test";
            x.addEventListener('click', ()=>{
                delete_row(container, child);
            })
            ...

请注意，我已经取代了x.onclick。你需要用我在x.addEventListener添加的内容替换它。

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

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

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.addEventListener('click', ()=>{
                delete_row(container, child);
            })
            div.appendChild(x);
            div.appendChild(document.createElement("br"));



    }
    function delete_row(container, child)
    {
        container.removeChild(child);
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.