How to remove certain element from my list Javascript html-CodePudding

HTML

<!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">
<title>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>


<script src="todojs.js"></script>
</body>
</html>

JAVASCRIPT

document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li = '<li id="item">'   doIt   '<button type="button" id="clearOne">X</button>'   '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
}
document.getElementById('clearOne').onclick = function () {
    const currentLi = document.getElementById('item');
    currentLi.removeChild();
}

}

SO im putting a X next to each to do and i want to be able to remove the one LI element when the user presses the X but i keep failing i tried multiple things cants figure it out

CodePudding user response：

I think this what you are looking for.

document.getElementById('myButton').onclick = function () {
  const doIt = document.getElementById('toDo').value;
  // create li element.
  const li = document.createElement('li');
  li.innerText = doIt;
  // create remove button.
  const removeButton = document.createElement('button');
  // Set text of remove button
  removeButton.innerText = 'X';
  // Add event listener for the remove button.
  removeButton.addEventListener('click', function() { this.parentNode.remove() } )
  // append the button inside the li element
  li.append(removeButton);
  // prepend the li element in the list.
  document.getElementById('list').prepend(li);
  document.getElementById('toDo').value = '';
  document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    ul.innerHTML = '';
  }
}

<!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">
<title>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>


<script src="todojs.js"></script>
</body>
</html>

CodePudding user response：

An easy way would be:

function remove(el) {
  el.parentElement.remove();
}

document.getElementById('myButton').onclick = function () {
    const doIt = document.getElementById('toDo').value;
    const li = '<li id="item">'   doIt   '<button type="button" onClick="remove(this)" id="clearOne">X</button>'   '</li>';
    document.getElementById('list').insertAdjacentHTML('beforeend', li);
    document.getElementById('toDo').value = '';
}

CodePudding user response：

First of all, You should not use the same id for multiple elements. You are assigning id of "item" to every li element. So when you try to remove the element by id it will not work as expected.

Assign a unique id to every li element (you can also use unique classes or custom refs. But let's use ids).

<li id="some_unique_id">todo </li>

I think we will have to use classes and custom data attributes on the buttons to achieve what we want.

Ex: <button data-todoid="_the_corresponding_todo_id_">Remove</button>

Here we use the data-todoid attribute value to identify which li element will remove when we click this.

Let's modify your code now.

document.getElementById('myButton').onclick = function () {

  // as we need some string or number to use as a unique id,
  // its better to use the current timestamp in milliseconds in here.
  const thiselementuniqueid = (new Date().getTime()).toString();
  const doIt = document.getElementById('toDo').value;
  const li = '<li id="todoitem_" thiselementuniqueid >'   doIt   '<button type="button" 
               data-todoid="todoitem_" thiselementuniqueid >X</button>'   '</li>';
  
  document.getElementById('list').insertAdjacentHTML('beforeend', li);
  
  document.getElementById('toDo').value = '';

  // get all the li remove buttons
  var clearButtons = getElementsByClassName('clearBtn'); 
  
  // write on click event action for all of them
  for(var a = 0; a<clearButtons.lenth;a  ){
    var asinglebutton = clearButtons[a]; // selected a button
    
    
    asinglebutton.onClick = function(){
     let todoid = $(this).data("todoid"); // get matching todo id to be removed on click
     let currentLi = document.getElementById(todoid);
     currentLi.removeChild();

    }
  }     

  document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    ul.innerHtml = "";
}

I haven't tested this. But this is the best approach in your case.

Edit : Leonardo's above answer is much simpler, easy, and quick. Try it.