Why does not this work with id when working with class

Question

If I make that remove button with id attribute it isnt working. When I make it with class attribute it is working. Why its not working with id?

$(function() {
  $("#btn").on("click", function() {
    var val = $("#yzbr").val();
    if (val !== '') {
      var elem = $("<li></li>").text(val);
      $(elem).append("<button id='rem'>REMOVE</button>");
      $("#ekl").append(elem);
      $("input").val("");
      $("#rem").on("click", function() {
        $(this).parent().remove();
      })
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>list</h1>
<input type="text" id="yzbr">
<button id="btn">add</button>
<ol id="ekl"></ol>

The answer to your question is whenever more than one DOM element has same id any action applied to that id will impact only on last occurrence, Same is happening in you code only last element is getting removed whatever remove button you click. As per definition **ID should be uniquely assigned to DOM elements.** — amit wadhwani, Aug 14 '17 at 22:28
Also, if you do it with a class, every time you add a new element, you're adding the event handler multiple times on all the previous elements. See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for the proper way to bind events on elements that you add dynamically. — Barmar, Aug 14 '17 at 23:44

Roko C. Buljan · Accepted Answer · 2017-08-14T22:47:00.150

You cannot have multiple ID on the same page. Use classes or...
...don't use anything at all!
Assign the click behavior directly to the created button.

jQuery(function( $ ) {

  // Use properly named functions,
  // so you'll know what it does without reading any code
  function addItemToList () {
  
    var val = $.trim( $("#name").val() );   // Trim whitespaces!!
    if (val === '') return;                 // Do nothing if no value
    $("#name").val("");                     // Reset input field

    $("<li/>", { // Create LI
      text: val,
      appendTo: "#list",       // appendTo #list sonds like poetry
      append: $("<button/>", { // append a BUTTON
        text: "REMOVE",
        on: {
          click: function() {
            $(this).closest("li").remove();
          }
        }
      })
    });
    
  }


  $("#add").on("click", addItemToList); // :)
  
  // Other DOM ready code here

});

<input type="text" id="name">
<button id="add">ADD</button>
<ol id="list"></ol>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Why does not this work with id when working with class

1 Answers1