how do i make my X button delete the specific object inside array?

user_15502451 0
Viewed 298

first time that I'm posting here I'm very new to web development and programming in general.

I'm currently trying to make my X button to delete the specific object inside an array. it goes like this- the user can make 3 yellow notes-the user the values and then it stored as an object and the function displayTasks() refreshes the the notes-inside displayTasks()-when the user press X it triggers the onclick() that needs to remove this certain object but instead it always removes the last note and object in the array how do I make it choose the exact object that inside a div? I hope I'm clear on this! thanks is advance!

those are the notes

class Task{
    constructor(mytask,mydate,mytime){
        this.task=mytask;
        this.date=mydate;
        this.time=mytime;
    }
   
}

const myTask = document.getElementById("task")
const date = document.getElementById("date")
const time = document.getElementById("time")
const save = document.getElementById("save")
const reset = document.getElementById("reset")
const paragraph = document.getElementById("mypara")
const taskRow = document.getElementById("taskRow")
const tasks = []


function addTask() {
    // 1. add new note to tasks array
    // 2. call displayNotes()
    if (tasks.length > 2) {
        return alert("Too Many Notes please Complete One");
    }
    tasks.push(new Task(myTask.value, date.value, time.value));

    resetTask();
    displayTasks();

}
function resetTask() {
    myTask.value = '';
    date.value = '';
    time.value = '';
}
function deleteTask(index) {
    tasks.splice(index, 1);
    displayTasks();
}

function displayTasks() {
    // 1. delete all inner html in tasks row
    // 2. for each element in tasks array: add a task html to the tasks row
    taskRow.innerHTML = "";

    for (task in tasks) {
       
            console.log(tasks)
        let taskDiv = document.createElement("div");
        taskDiv.setAttribute("class", "col-sm task");

        let description = document.createElement("p");
        description.setAttribute("class", "description");
        description.innerHTML = `${tasks[task].task}<br>`

        let finishDate = document.createElement("div");
        finishDate.setAttribute("class", "date");
        finishDate.innerHTML = `${tasks[task].date}`;

        let escape = document.createElement("p");
        escape.setAttribute("class", "escape glyphicon glyphicon-remove");
        escape.innerHTML = `X`;
        escape.onclick = function callback() {
            deleteTask(task);
            console.log(task);
            // escape.onclick = function() {
            //     deleteTask(task);
            //   }
        }
        taskDiv.appendChild(escape)
        taskDiv.appendChild(description);
        taskDiv.appendChild(finishDate);
        taskRow.appendChild(taskDiv);

    }

}
body {
background-image: url("/jpglibrary/tile.gif");
position: absolute;
left: 450px;
}
.notes{
  position: absolute;
}
/* .task_input{
  overflow-y: auto;

} */

.notesInput{
  position: relative;
  padding: 10px;
  margin: 10px;
  background-image: url("jpglibrary/formbg.jpg");
  

}
.savebutton{
  position: absolute;
  left: 500px;
  bottom: 30px;
}
.resetbutton{
  position: absolute;
  left: 500px;
  bottom: 0px;
}
h1{
  font-family: 'cuteFont';
  text-align: center;
  margin-top: 30px;
  font-size: 8ch;   
}

.innertext{
  height: 188px;
  width: 170px;
  position: absolute;
  top: 408px;
}
.date{
  position: absolute;
  padding: 4px;
  bottom: 7px;
  height: 28px;
  width: 100px;
  font-size: 13px;
   
}
.task{
  background-image: url("/jpglibrary/notebg.png");
  background-repeat: no-repeat;
  height: 240px;
  width: 100px;
  padding: 0px;
  animation: fadeIn ease 2s;
}
.description{
  position:absolute;
  top: 40px;
  padding: 3px;
  width: 175px;
  height: 170px ;
  overflow-y: auto;
}
.escape{
  
  padding-left: 160px;
  padding-top: 20px;
}
@font-face{
  font-family: cuteFont;
  src: url("fonts/CuteNotes.ttf");
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body id="main_body">
  <div class='container'>
    <h1>My Task Board</h1>
    <!-- <div class="notes">
      <img src="jpglibrary/formbg.jpg" class="mx-auto d-block">
      <img src="jpglibrary/formbg.jpg" class="mx-auto d-block">
      <img src="jpglibrary/formbg.jpg" class="mx-auto d-block">

    </div> -->
    <div class=notesInput>
      <input type="text" placeholder="My task" id="task" class="task_input">
      <br>
      <div>
        <label>Finish Date <br>
          <input type="date" id="date">
        </label>
      </div>
      <div>
        <label>Finish Time<br>
          <input type="time" id="time">
      </div></label>
      <div class="savebutton">
        <input type="button" value="Save" onclick=addTask() id="save">
      </div>
      <div class="resetbutton">
        <input type="button" onclick="resetTask()" value="Reset" id="reset">
      </div>
    </div>
    <div id="tasksContainer" class="container">
      <div id="taskRow" class="row">

      </div>
    </div>

  </div>

</body>
<script src="Task.js"></script>
<script src="script.js"></script>

</html>

javascript-objects arrays dom html javascript
1 Answers

You just need to get the index of the clicked task an give that index to deleteTask().

escape.addEventListener('click', function callback(e) {
    var child = e.target.parentElement;
    var container = child.parentElement;
    var index = Array.prototype.slice.call(container.children).indexOf(child)
    deleteTask(index);
});

Working example:

class Task{
    constructor(mytask,mydate,mytime){
        this.task=mytask;
        this.date=mydate;
        this.time=mytime;
    }
}

const myTask = document.getElementById("task")
const date = document.getElementById("date")
const time = document.getElementById("time")
const taskRow = document.getElementById("taskRow")
const tasks = []

function addTask() {
    if (tasks.length > 2) {
        return alert("Too Many Notes please Complete One");
    }
    tasks.push(new Task(myTask.value, date.value, time.value));
    resetTask();
    displayTasks();
}
function resetTask() {
    myTask.value = "";
    date.value = "";
    time.value = "";
}
function deleteTask(index) {
    tasks.splice(index, 1);
    displayTasks();
}
function displayTasks() {
    taskRow.innerHTML = '';

    for (task in tasks) {
       
        let taskDiv = document.createElement("div");
        taskDiv.setAttribute("class", "col-sm task");

        let description = document.createElement("p");
        description.setAttribute("class", "description");
        description.innerText = `${tasks[task].task}`;

        let finishDate = document.createElement("div");
        finishDate.setAttribute("class", "date");
        finishDate.innerText = `${tasks[task].date}`;

        let escape = document.createElement("p");
        escape.setAttribute("class", "escape glyphicon glyphicon-remove");
        escape.innerText = 'X';
        
        escape.addEventListener('click', function callback(e) {
            var child = e.target.parentElement;
            var container = child.parentElement;
            var index = Array.prototype.slice.call(container.children).indexOf(child)
            deleteTask(index);
        });
        
        taskDiv.appendChild(escape)
        taskDiv.appendChild(description);
        taskDiv.appendChild(finishDate);
        
        taskRow.appendChild(taskDiv);

    }

}
.container {
    width: 250px;
    text-align: center;
}
.inputs, #taskRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.task {
    border: 1px solid black;
    text-align: left;
}
.escape {
    cursor: pointer;
    text-align: right;
    margin: 0;
}
<div class='container'>

    <h1>My Task Board</h1>
    
    <div class=notesInput>
        <div class="inputs">
            <label for="task">Task</label>
            <input type="text" placeholder="My task" id="task" class="task_input">
        </div>
        <div class="inputs">
            <label for="date">Finish Date</label>
            <input type="date" id="date">
        </div>
        <div class="inputs">
            <label for="date">Finish Time</label>
            <input type="time" id="time">
        </div>
        <div class="inputs">
            <input type="button" onclick="resetTask()" value="Reset" id="reset">
            <input type="button" value="Save" onclick=addTask() id="save">
        </div>
    </div>
    
    <div id="tasksContainer" class="container">
        <div id="taskRow" class="row"></div>
    </div>

</div>

user_153773550
Related