如何通過刪除按鈕刪除插入的行
[英]how to delete the inserted row by the delete button
問題描述
我試圖通過每個任務結束時創建的刪除按鈕刪除輸入的任務。 我在這里發布了我的完整代碼 這是一個使用 bootstrap CDN 的簡單待辦事項列表。
我想刪除包含用戶輸入任務、序列號、時間和日期的行。
var task = document.getElementById("enter"); var bttn = document.getElementById("button2"); var rowIdVar = document.getElementById("test"); var rowIdVar1 = document.getElementById("id1"); bttn.addEventListener("click", add); var x = 0; function add() { var val1 = task.value; if (!val1) { alert("Please Enter A Task"); } else { sno(); name(); tdate(); time(); cButton(); var new1 = document.createElement("l"); rowIdVar1.appendChild(new1); } } function sno() { if (x == x) { x = x + 1; var list1 = document.createElement("l"); list1.innerHTML = x; rowIdVar.appendChild(list1).setAttribute("class", "col-md-2"); } } function name() { var val = task.value; var list2 = document.createElement("l"); list2.innerHTML = val; rowIdVar.appendChild(list2).setAttribute("class", "col-md-4"); task.value = ""; } function tdate() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var year = d.getFullYear(); var result = (date + "/" + month + "/" + year); var lm = document.createElement("l"); lm.innerHTML = result; rowIdVar.appendChild(lm).setAttribute("class", "col-md-2"); } function time() { var t = new Date(); var hour = t.getHours(); var minutes = t.getMinutes(); var seconds = t.getSeconds(); var result1 = (hour + ":" + minutes + ":" + seconds); var lm1 = document.createElement("l"); lm1.innerHTML = result1; rowIdVar.appendChild(lm1).setAttribute("class", "col-md-2"); } function cButton() { var btn = document.createElement("input"); btn.setAttribute("type", "button"); btn.setAttribute("value", "delete"); btn.setAttribute("class", "btn btn-danger"); rowIdVar.appendChild(btn).setAttribute("class", "col-md-2"); btn.addEventListener("click", deleteElements); } function deleteElements() { rowIdVar1.parentNode.removeChild(rowIdVar); }
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="row"> <div class="col-md-10 col-sm-10 h"> <center> <h1>TO DO LIST...</h1> </center><br> </div> </div> <div class="container"> <div class="row"> <div class="col-md-10 col-sm-10 bg"> <input type="text" class="form-control " placeholder="Enter task" id="enter"> </div> <div class="col-md-2 col-sm=2"> <button type="button" class="btn btn-primary btn-lg" id="button2"><center>ADD</center></button> </div> </div><br><br> </div> <div class="container"> <div class="row" id="id1"> <div class="col-md-2 b"> <h1>S.no</h1> </div> <div class="col-md-4 b"> <h1>Enter Task</h1> </div> <div class="col-md-2 b"> <h1>Date</h1> </div> <div class="col-md-2 b"> <h1>Time</h1> </div> <div class="col-md-2"> </div> </div> </div> <div class="row" id="test"> <div class="col-md-2"> </div> <div class="col-md-4"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> </div>
1 個解決方案
解決方案1
0 已采納 2019-02-13 16:42:31
var task = document.getElementById("enter"); var bttn = document.getElementById("button2"); var rowIdVar = document.getElementById("test"); var rowIdVar1 = document.getElementById("id1"); bttn.addEventListener("click", add); var x = 0; function add() { var val1 = task.value; if (!val1) { alert("Please Enter A Task"); } else { sno(); name(); tdate(); time(); cButton(); var new1 = document.createElement("l"); rowIdVar1.appendChild(new1); } } function sno() { if (x == x) { x = x + 1; var list1 = document.createElement("li"); list1.innerHTML = x; rowIdVar.appendChild(list1).setAttribute("class", "col-md-2"); } } function name() { var val = task.value; var list2 = document.createElement("li"); list2.innerHTML = val; rowIdVar.appendChild(list2).setAttribute("class", "col-md-4"); task.value = ""; } function tdate() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var year = d.getFullYear(); var result = (date + "/" + month + "/" + year); var lm = document.createElement("li"); lm.innerHTML = result; rowIdVar.appendChild(lm).setAttribute("class", "col-md-2"); } function time() { var t = new Date(); var hour = t.getHours(); var minutes = t.getMinutes(); var seconds = t.getSeconds(); var result1 = (hour + ":" + minutes + ":" + seconds); var lm1 = document.createElement("li"); lm1.innerHTML = result1; rowIdVar.appendChild(lm1).setAttribute("class", "col-md-2"); } function cButton() { var btn = document.createElement("input"); btn.setAttribute("type", "button"); btn.setAttribute("value", "delete"); btn.setAttribute("class", "btn btn-danger"); rowIdVar.appendChild(btn).setAttribute("class", "col-md-2"); btn.addEventListener("click", deleteElements); } function deleteElements() { rowIdVar.parentNode.removeChild(rowIdVar); }
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/> <body id="body"> <div class="row"> <div class="col-md-10 col-sm-10 h"> <center> <h1>TO DO LIST...</h1> </center><br> </div> </div> <div class="container"> <div class="row"> <div class="col-md-10 col-sm-10 bg"> <input type="text" class="form-control " placeholder="Enter task" id="enter"> </div> <div class="col-md-2 col-sm=2"> <button type="button" class="btn btn-primary btn-lg" id="button2"><center>ADD</center></button> </div> </div><br><br> </div> <div class="container"> <div class="row" id="id1"> <div class="col-md-2 b"> <h1>S.no</h1> </div> <div class="col-md-4 b"> <h1>Enter Task</h1> </div> <div class="col-md-2 b"> <h1>Date</h1> </div> <div class="col-md-2 b"> <h1>Time</h1> </div> <div class="col-md-2"> </div> </div> </div> <div class="row" id="test"> <div class="col-md-2"> </div> <div class="col-md-4"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> </div>
如何在Angular4中刪除表中的行。 刪除按鈕在每一行中
[英]How to delete a row in a table in Angular4 . The delete button is in each row
如何刪除每行中有一個刪除按鈕而不是刪除按鈕的特定行？
[英]How to delete a specific row with one delete button not a delete button in every row?
單擊表單中的刪除按鈕后如何在gridview中刪除行
[英]How to delete a row in gridview after clicking the delete button in a form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.