CODEWITHSUNDEEP
javascripthtmlcss
Nina
Nina

Reputation: 81

Add close button for <li> item added through input field

I'm working on a To-Do List with html, css and javascript and currently I have added an input field and a button. If something is typed into the input field, you have to click the button so the input appears in a <ul> list as an <li>. Now I want to add an X-button to every <li> that deletes it when you click it.

How do I do that? Thanks!

function myFunction() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("input").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    li.classList.add("newItem");
    if (inputValue === '') {
      alert("You must write something!");
    } else {
      document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("input").value = "";
  
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
      }
    }
  }
#h {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  color: white;
}
#div1 {
  background-color: rgb(143, 74, 74);
  width: 1270px;
  height: 120px;
  padding-top: 10px;
}
#my_id {
  background-color: rgb(214, 214, 214);
  height: 100px;
  width: 1250px;
}
.button {
  background-color: rgb(196, 193, 193);
  transition-duration: 0.1s;
  padding-top: 6px;
  padding-bottom: 7px;
  padding-right: 10px;
  padding-left: 10px;
}
.button:hover {
  background-color: rgb(245, 243, 243);
  cursor: pointer;
  }
#div2 {
  text-align: center;
}
#input {
  width: 40%;
  height: 25px;
}
#my_p2 {
  display: none; 
}
#my_id:hover {
  background-color: rgb(151, 151, 151) ;
}     
#myUL {
  margin: 0;
  padding: 0;
}
.newItem {
  cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    list-style-type: none;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
  }
.newItem:hover {
  background-color: rgb(223, 222, 222);
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="ToDo.css">
    <title> My To-Do List </title>
</head>

<body>
    <div>
        <div id="div1">
            <h2 id="h">My To-Do List</h2>
            <div id="div2">
                <input type="text" id="input" placeholder="Title..." >
                <span onclick="myFunction()" class="button">Add</span>
            </div>
        </div>
    </div>
    <ul id="myUL">
    </ul>
    
</body>
<script src="ToDo.js"></script>

</html>

Upvotes: 1

Views: 337

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28226

You work too hard. Your script part can be significantly shortened:

const ul=document.getElementById("myUL");
function myFunction() { 
  const inp=document.getElementById("input");
  if(inp.value=="") alert("please enter some text first!");
  else {
   ul.innerHTML+=`<li class="newItem">${inp.value}<span>\u00D7</span></li>`
   inp.value=""
  }
}
ul.onclick=ev=>
  ev.target.tagName=="SPAN" 
  && ev.target.parentNode.tagName=="LI"
  && ev.target.parentNode.remove();
#h {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  color: white;
}
#div1 {
  background-color: rgb(143, 74, 74);
  width: 1270px;
  height: 120px;
  padding-top: 10px;
}
#my_id {
  background-color: rgb(214, 214, 214);
  height: 100px;
  width: 1250px;
}
.button {
  background-color: rgb(196, 193, 193);
  transition-duration: 0.1s;
  padding-top: 6px;
  padding-bottom: 7px;
  padding-right: 10px;
  padding-left: 10px;
}
.button:hover {
  background-color: rgb(245, 243, 243);
  cursor: pointer;
  }
#div2 {
  text-align: center;
}
#input {
  width: 40%;
  height: 25px;
}
#my_p2 {
  display: none; 
}
#my_id:hover {
  background-color: rgb(151, 151, 151) ;
}     
#myUL {
  margin: 0;
  padding: 0;
}
.newItem {
  cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    list-style-type: none;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
  }
.newItem:hover {
  background-color: rgb(223, 222, 222);}
li > span {position:absolute; right:6px; top:6px; font-size:18pt}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="ToDo.css">
    <title> My To-Do List </title>
</head>

<body>
    <div>
        <div id="div1">
            <h2 id="h">My To-Do List</h2>
            <div id="div2">
                <input type="text" id="input" placeholder="Title..." >
                <span onclick="myFunction()" class="button">Add</span>
            </div>
        </div>
    </div>
    <ul id="myUL">
    </ul>
    
</body>
<script src="ToDo.js"></script>

</html>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106038

You could add on the fly an onclick event on a cross added inside the li itself :

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.setAttribute('class', 'close');
  span.setAttribute('title', 'click to remove this Item');
  span.setAttribute('onclick', 'this.parentElement.remove()');
  span.appendChild(txt);
  li.prepend(span);

Demo below:

function myFunction() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("input").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  li.classList.add("newItem");
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("input").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.setAttribute('class', 'close');
  span.setAttribute('title', 'click to remove this Item');
  span.setAttribute('onclick', 'this.parentElement.remove()');
  span.appendChild(txt);
  li.prepend(span);


}
#h {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  color: white;
}

#div1 {
  background-color: rgb(143, 74, 74);
  width: 1270px;
  height: 120px;
  padding-top: 10px;
}

#my_id {
  background-color: rgb(214, 214, 214);
  height: 100px;
  width: 1250px;
}

.button {
  background-color: rgb(196, 193, 193);
  transition-duration: 0.1s;
  padding-top: 6px;
  padding-bottom: 7px;
  padding-right: 10px;
  padding-left: 10px;
}

.button:hover {
  background-color: rgb(245, 243, 243);
  cursor: pointer;
}

#div2 {
  text-align: center;
}

#input {
  width: 40%;
  height: 25px;
}

#my_p2 {
  display: none;
}

#my_id:hover {
  background-color: rgb(151, 151, 151);
}

#myUL {
  margin: 0;
  padding: 0;
}

.newItem {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
}

.newItem:hover {
  background-color: rgb(223, 222, 222);
}

.close {
  float: right;
  background:yellow;
  color:red;
  font-weight:bold;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="ToDo.css">
  <title> My To-Do List </title>
</head>

<body>
  <div>
    <div id="div1">
      <h2 id="h">My To-Do List</h2>
      <div id="div2">
        <input type="text" id="input" placeholder="Title...">
        <span onclick="myFunction()" class="button">Add</span>
      </div>
    </div>
  </div>
  <ul id="myUL">
  </ul>

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

</html>

Upvotes: 0

Related Questions