Добавлен код HTML через идентификатор с jquery - PullRequest
Новая
       0

Добавлен код HTML через идентификатор с jquery

0 голосов
/ 11 апреля 2020

У меня проблема с использованием .append ("..."). Я кодирую простой список дел и хочу удалить элемент списка, когда нажимаю на добавленную кнопку «УДАЛИТЬ», ссылаясь на класс кнопок.

Я думаю, что он не работает, потому что .append () не меняет html код сайта. По крайней мере, я не могу определить разницу после нажатия кнопки «ДОБАВИТЬ ПУНКТ».

У вас есть идеи? Заранее спасибо! 

var inputText;
var itemList = [];


$("#addButton").click(function(){
    inputText = $("#textInput").val();
    itemList.push(inputText);
    $("#textInput").val("");
    showItems();
});

//not working
$(".deleteButton").click(function(e){
    console.log("test");
    var className = e.attr("id");
    console.log("ID:" + className);
});

function showItems(){
    $("#list").html('');
    for(var i=0; i<=itemList.length-1; i++){
        $("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem '+ i +'">'+ itemList[i] +'</p> <button type="button" class="deleteButton" id="'+ i +'">REMOVE</button><div>');
    }
}

    <body>
        <div class="container">
            <div class="headline">
                <h1 id="headline">TO DO LIST</h1>
            </div>
            <div class="userInput">
                <input type="text" id="textInput">
                <button type="button" id="addButton">ADD ITEM</button>
            </div>
            <div class="list" id="list">
                <div class="listelement" id="listelement">
                </div>
            </div>
        </div>
        <script src="jquery-3.4.1.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

Ответы [ 4 ]

1 голос
/ 11 апреля 2020

Вам необходимо использовать делегирование событий. 

$(document).on("click",".deleteButton",function(e) {
  $(this).closest(".listelement").remove()
});

$(".deleteButton").click(function(e){ будет работать только с теми элементами, которые существуют на странице, но не с новыми добавленными элементами. 

var inputText;
var itemList = [];


$("#addButton").click(function() {
  inputText = $("#textInput").val();
  itemList.push(inputText);
  $("#textInput").val("");
  showItems();
});

//not working
$(document).on("click",".deleteButton",function(e) {
  $(this).closest(".listelement").remove()
});

function showItems() {
  $("#list").html('');
  for (var i = 0; i <= itemList.length - 1; i++) {
    $("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="headline">
    <h1 id="headline">TO DO LIST</h1>
  </div>
  <div class="userInput">
    <input type="text" id="textInput">
    <button type="button" id="addButton">ADD ITEM</button>
  </div>
  <div class="list" id="list">
    <div class="listelement" id="listelement">
    </div>
  </div>
</div>
0 голосов
/ 11 апреля 2020

Если вы попытаетесь что-то сделать с элементами, которые динамически добавляются в DOM с помощью метода jQuery click (), это не сработает, поскольку оно связывает событие click только с элементами, которые существуют на момент привязки вас можно использовать 

$(document).on("click", "button.deleteButton" , function() {
            $(this).parent().remove();
        });

https://jsfiddle.net/82d0e5at/3/

0 голосов
/ 11 апреля 2020

Проблема здесь в том, что к добавленному элементу не прикреплен прослушиватель событий, когда вы вызываете $(...).click, он присоединяет прослушиватель событий только к существующим в данный момент элементам. Поскольку вы вызываете его, когда документ загружается, и в то время нет элементов с классом deleteButton, он ничего не будет делать.

Вы можете решить эту проблему, переместив код удаления в свою собственную функцию и прикрепив прослушиватель события щелчка для каждого нового элемента, который вы создаете.

Чтобы сделать это эффективно, вам необходимо получить элемент, который вы создаете, вы можете сделать это так: 

$(HTML Code).appendTo('#list').click(...);

Это создаст элемент из html, который вы передадите, добавите его к элементу с идентификатором list и присоедините к нему прослушиватель события щелчка, так что в итоге получится: 

var inputText;
var itemList = [];


$("#addButton").click(function() {
  inputText = $("#textInput").val();
  itemList.push(inputText);
  $("#textInput").val("");
  showItems();
});

function deleteItem(e) {
  console.log(e.target.id);
}

function showItems() {
  $("#list").html('');
  for (var i = 0; i <= itemList.length - 1; i++) {
    var html = '<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>';
    $(html).appendTo('#list').click(deleteItem);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="headline">
    <h1 id="headline">TO DO LIST</h1>
  </div>
  <div class="userInput">
    <input type="text" id="textInput">
    <button type="button" id="addButton">ADD ITEM</button>
  </div>
  <div class="list" id="list">
    <div class="listelement" id="listelement">
    </div>
  </div>
</div>
0 голосов
/ 11 апреля 2020

Если вы просто хотите удалить этот указанный c div, по которому вы щелкаете, вы можете использовать следующий код. Вам не нужно совпадать с id здесь. 

$(document).on("click",".deleteButton",function(e){
    let parent = $(this).closest(".listelement");
    parent.remove();
});

Но в соответствии с вашим кодом после удаления, если вы добавите что-либо, все данные массива будут отображаться. Потому что вы не удаляете данные из массива. Я думаю, вам нужно удалить эти данные из массива тоже. 

$(document).on("click",".deleteButton",function(e){
    let parent = $(this).closest(".listelement");
    let id = $(this).attr("id");
    console.log(id);
    itemList.splice(id, 1);
     parent.remove();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...