close button define using javascript-CodePudding

i was making a Customized Todo list that everything is ok yet except the lists close button , that doesn't work can you give me a soloution for it ? i took a source code for close button if you know easier way tell me please ... i don't undrestand this close button source code and don't know how to fix that .

here is the js code :

let submit   = document.getElementsByClassName('addbutton')[0];
let ul       = document.getElementsByTagName('ul')[0];
let display  = document.getElementById('db');
let li       = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> ' 
               display;
             
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">' 
                  '<input type ="submit" value="&#215" class ="unicodes" />'
                  display.value 
                  '</li>';
});

// here is the close button source code
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

* {
  padding: 0;
  margin: 0;
  }
body {
  background-image: url('wallpaper.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  }
header h1 {
  color: white;
  font-size: 2em;
  padding: 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
.main-sec {
  background-color: rgba(255, 0, 0, 0.521);
  width: 495px;
  height: 632px;
  border-radius: 25px;
  margin-left: 100px;
  }
.logo {
  width: 50px;
  height: 50px;
  padding: 16px 0 0 16px;
  }
.logo:hover {
  opacity: 0.7;
  transition: 1s;
  transform: rotate(360deg)
  }
.frame {
  float: right;
  width: 465px;
  height: 624px;
  margin: -8px 15px 15px 15px;
  border-radius: 25px;
  border: 1px solid rgb(0, 0, 0);
  }
.add_todo {
  width: 254px;
  height: 41px;
  background-color: white;
  border-radius: 0 7px 7px 0;
  outline: none;
  border: none;
  margin-right: 12%;
  padding: 0 10px;
  text-align: left;
  font-size: 1em;
  }
.addbutton {
  float: left;
  font-size: 1.2em;
  padding: 0px 5px;
  margin-left: 51.5px;
  margin-top: -0.1px;
  height: 42.5px;
  }
.addbutton:hover {
  transition: 1s;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 0, 0);
  }
.list_style {
  width: 254px;
  height: 33px;
  background-color: white;
  border-radius: 7px;
  outline: none;
  border: none;
  margin-right: 12%;
  padding: 0 10px;
  text-align: center;
  margin-top: 12px;
  list-style: none;
  font-size: 1.2em;
  padding-top: 9px;
  }
.unicodes {
  float: left;
  height: 42px;
  width: 42px;
  margin: -9px;
  border-radius: 7px;
  border: none;
  font-size: 1.5em;
  }
.unicodes:hover {
  background-color: rgb(165, 165, 165);
  color: red;
  transition: 1s;
  }

<header>
  <h1>
    To Do list :
  </h1>
</header>
<section class="main-sec">
  <fieldset class="frame" dir="rtl">
    <legend>
      <img src="konoha.png" class="logo">
    </legend>
    <button class="addbutton">  AddTitle </button>
    <input type="text" class="add_todo" id="db" />
    <ul>
      <li class="list_style">
        <input type="submit" value="&#215" class="unicodes" /> Test the Front
      </li>
    </ul>
  </fieldset>
</section>

CodePudding user response：

I'm not pretty sure what the problem is but I'm just going to the remove function given to html elements and.. it should work.. do tell me what happens ;-;

let submit = document.getElementsByClassName('addbutton')[0];
let ul = document.getElementsByTagName('ul')[0];
let display = document.getElementById('db');
let li = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="&#215" class ="unicodes" />'   display.value   '</li>';
});

// here is the close button source code
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function() { //CHANGE MADE(below)
    close[i].remove() //button should disappear when clicked.. not sure if that's what you want
  } //CHANGE MADE(above)

}

CodePudding user response：

You are not binding the close action for the newly created elements. Move the close functionality to a function and call it after create (or) call the close functionality as onclick attribute. Replace the js code like below and it should work.

let submit = document.getElementsByClassName('addbutton')[0];
let ul = document.getElementsByTagName('ul')[0];
let display = document.getElementById('db');
let li = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="&#215" class ="unicodes" />'   display.value   '</li>';
closeEventBinding();
});

// here is the close button source code
function closeEventBinding(){
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }

}
}

CodePudding user response：

The close button code happen only once the script load and covers only the existing todos (In this case only one).

You need to define the close button action each time you create one.

let submit = document.getElementsByClassName('addbutton')[0];
let ul = document.getElementsByTagName('ul')[0];
let display = document.getElementById('db');
// let li = document.createElement('li');
// li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist() {
  // NOTICE: to each button add the onclick event 
  ul.innerHTML  = `<li class="list_style">
                    <input type="submit" value="&#215" onclick="this.parentElement.style.display='none'" class="unicodes" />${display.value}
                   </li>`;
});

// here is the close button source code
// var close = document.getElementsByClassName("unicodes");
// var i;
// for (i = 0; i < close.length; i  ) {
//   close[i].onclick = function() {
//     var div = this.parentElement;
//     div.style.display = "none";
//   }

// }

CodePudding user response：

If you want to delete your to-do list, you can use a trigger by calling a function to delete the to-do list.

// Add TODO
let submit = document.getElementsByClassName('addbutton')[0];
let ul = document.getElementsByTagName('ul')[0];
let display = document.getElementById('db');
let li = document.createElement('li');

li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
// Trigger close in html
close()
submit.addEventListener('click', function() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="&#215" class ="unicodes" />'   display.value   '</li>';

  // Trigger close if todo has new element
  close()
});

// Delete TODO
function close() {
  // Find all element close
  let close = document.querySelectorAll(".unicodes");
  // Loop for all element
  close.forEach(element => {
    // If element has click
    element.addEventListener('click', function() {
      // get a parent and remove this
      element.parentElement.remove();
    });
  });
};