如何通过删除按钮删除插入的行

时间：2019-02-13 15:39:22

标签： javascript css

我试图通过每个任务结束时创建的删除按钮删除输入的任务。我在这里发布我的完整代码 通过使用引导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 个答案:

答案 0 :(得分：0)

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>

相关问题
最新问题