Remove
element from
onclick without refreshing page

Question

At the moment i need to remove an li element created by jQuery when it has been clicked.

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
  var li = $('<li/>')
    .onclick(function() {
      $(this).remove()
    })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

<body>
  <h1>What do you like?</h1>
  <form id=likeform>
    <input name=thing placeholder="a thing you like" size=30>
    <input type=submit>
  </form>

  <ul id=likes></ul>
  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
  <script src="scripts/index.js"></script>
</body>

</html>

Currently this has been successful apart from i need to manually reload the page for the change to take effect

Is this what you are saying? 1. load page 1. click 1. observe bad behavior 1. reload page 1. everything looks fine — Paul Nikonowicz, Apr 28 '19 at 15:08
yes, i load the page and add an element, click that element, refresh and it removes — TBolton, Apr 28 '19 at 15:11

Aaron3219 · Accepted Answer · 2019-04-28T15:19:57.847

Your problem is right here:

var li = $('<li/>').onclick(function() {
    $(this).remove()
});

First of all you don't need the comparison operators (<, >) as JQuery will select elements by their tag names. Also, you can't add event listeners the "normal" way on dynamically created elements.

This is discussed right here.

To fix your problem replace the above with this:

$(document).on("click", "li", function() {
    $(this).remove();
});

Working example:

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
  var li = $(document).on("click", "li", function() {
    $(this).remove();
  });
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>What do you like?</h1>
<form id=likeform>
  <input name=thing placeholder="a thing you like" size=30>
  <input type=submit>
</form>

<ul id=likes></ul>

score 0 · Answer 2 · answered Apr 28 '19 at 15:13

I think this is essentially what you are trying to do:

$('li').each(function (i) {
  $(this).click(() => $(this).remove());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>

score 0 · Answer 3 · answered Apr 28 '19 at 15:16

would you please try following.

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}
$(document).on("click", "#likes li", function(){
 $(this).remove();
});

Remove element from onclick without refreshing page

3 Answers3

Remove
element from
onclick without refreshing page