JavaScript remove li element by button

Question

Please help to configure the button on removing dynamic elements. I have an code : https://www.w3schools.com/code/tryit.asp?filename=G2T2WSPSDUVS

Code :

<!DOCTYPE html>
<html>
<body>

<div>
  <input type="checkbox" id="coffee" name="coffee" checked>
  <label for="coffee">Coffee</label>
</div>

<div>
  <input type="checkbox" id="gym" name="gym">
  <label for="gym">Gym</label>
</div>

<div>
  <input type="checkbox" id="rose" name="rose">
  <label for="rose">Rose</label>
</div>

<button onclick="myFunction()">Try it</button>

<ul id="myList"></ul>

<script>


function myFunction() {
  var node = document.createElement("LI");

  var checkBoxCoffe = document.getElementById("coffee");
  var checkBoxGym = document.getElementById("gym");
  var checkBoxRose = document.getElementById("rose");
  var textnode = document.createTextNode("");

  if (checkBoxCoffe.checked == true){
      textnode.textContent=textnode.textContent+"Coffee; "
  } 
  if (checkBoxGym.checked == true){
     textnode.textContent=textnode.textContent+"Gym; "
  } 
  if (checkBoxRose.checked == true){
     textnode.textContent=textnode.textContent+"Rose; "
  } 
     var button = document.createElement("button");
     button.innerHTML = "Remove";
     node.appendChild(textnode);
     node.appendChild(button);
     document.getElementById("myList").appendChild(node);


}
</script>
</body>
</html>

How I can do that each button will remove exectly selected li element? everything is working only remove button still need to do thanks

Possible duplicate of [How to remove the parent element using plain javascript..!](https://stackoverflow.com/questions/2727717/how-to-remove-the-parent-element-using-plain-javascript) — pavi2410, Apr 06 '19 at 09:51
Have a look at [`.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). And searching for "dom remove element" (analog to _"createElement()"_) should give you enough resources to accomplish the task. — Andreas, Apr 06 '19 at 09:53
in this case add a class to button and then bind click event to button and then something like on button click `this.parentNode.remove();` — RohitS, Apr 06 '19 at 09:57

score 2 · Accepted Answer · answered Apr 06 '19 at 10:03

2

add onclick event to button before node.appendChild(button);

button.onclick = function(){
    button.parentElement.remove()
    return;
};

answered Apr 06 '19 at 10:03

MAjidH1

121
4

score 0 · Answer 2 · answered Apr 06 '19 at 10:18

Here is something i tried. (Note : I will suggest you to use something like `jquery' which will ease out many things.

document.getElementById('add').addEventListener('click',function(){
addItems();
});

function addItems(){
var parent = document.createElement('div');
var text = document.createElement('input');
text.innerText = "Click button";
var button = document.createElement('button');
button.className = "btn";
button.innerText = "Click";
parent.appendChild(text);
parent.appendChild(button);

// this is something you are looking for.
button.addEventListener('click',function(){
this.parentNode.remove();
});

document.getElementById('test').appendChild(parent);

}

<div id="test">
</div>
<button id="add"> Add more
</button>

Happy Coding!

zer00ne · Answer 3 · 2019-04-06T10:34:36.523

Register the click event to the <ul> and then delegate the click event to the actual button clicked (event.target). Details commented in demo

// Register click event to button#add
document.getElementById('add').onclick = addItem;
// Reference <ul>
var list = document.getElementById('list');

function addItem(e) {
  // Get all checked checkboxes
  var chx = document.querySelectorAll('input:checked');
  // Clear list
  list.innerHTML = '';
  // Loop through the checked checkboxes
  for (let i = 0; i < chx.length; i++) {
    // Create a <li>
    var li = document.createElement('LI');
    // Set <li> text to the checked checkbox label text
    li.textContent = chx[i].nextElementSibling.textContent;
    // Append a button to <li> 
    li.insertAdjacentHTML('beforeend', `&nbsp;<button>&times;</button>`);
    // Append <li> to <ul>
    list.appendChild(li);
  }
}

// Register click event to <ul>
list.onclick = removeItem;

function removeItem(e) {
  // Reference the clicked tag
  var tgt = e.target;
  // if the clicked tag is a button...
  if (tgt.tagName === "BUTTON") {
    // Find the closest <li> to the clicked button and remove it
    tgt.closest('li').remove();
  }
  // otherwise just terminate function
  return false;
}

<!DOCTYPE html>
<html>

<body>

  <div>
    <input type="checkbox" id="coffee" name="coffee" checked>
    <label for="coffee">Coffee</label>
  </div>

  <div>
    <input type="checkbox" id="gym" name="gym">
    <label for="gym">Gym</label>
  </div>

  <div>
    <input type="checkbox" id="rose" name="rose">
    <label for="rose">Rose</label>
  </div>

  <button id='add'>ADD</button>

  <ul id="list"></ul>


</body>

</html>

score 0 · Answer 4 · answered Apr 06 '19 at 10:32

0

you can try this code

in this code i create simple removeli function on remove button.

button.onclick = removeli;
function removeli()
{
   document.getElementById("myList").removeChild(node);  
}

answered Apr 06 '19 at 10:32

Bhavesh Ajani

991
9
11

JavaScript remove li element by button

4 Answers4