Удалить элемент в списке - PullRequest
Новая
       2

Удалить элемент в списке

0 голосов
/ 01 октября 2018

Я должен иметь возможность манипулировать списком с помощью jquery.Я уже создал список с элементом: 

$(document).ready(function() {
  $("#lista1").on('click', 'canc', function() {
    $ogg1 = $(this).closest('li');
    $ogg1.remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill">X</button>
  </li>
</ul>

Теперь я хотел бы удалить элемент, когда нажата клавиша удаления, и весь список идет вверх.Как я могу это сделать?

Ответы [ 4 ]

0 голосов
/ 01 октября 2018

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

$(document).ready(function(){
    $(".Remove").click(function(){
        $(this).parent().remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill Remove">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill Remove">X</button>
  </li>
</ul>

</body>
</html>
0 голосов
/ 01 октября 2018

Используйте класс вместо идентификаторов для кнопки отмены и используйте код ниже 

  $(".canc").click(function () {
    $(this).closest("li").remove();
   });

<ul id="lista1" class="list-group">

    <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem1"> Carne </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button  class="badge badge-primary badge-pill canc">X</button>

    </li>

    <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem2"> Pesce </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button class="badge badge-primary badge-pill canc">X</button>

    </li>

</ul>
0 голосов
/ 01 октября 2018

См. Пример ниже, 

function fnDelete(obj) {
    obj.closest("li").remove()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">

  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill" onclick="fnDelete(this)">X</button>

  </li>

  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill" onclick="fnDelete(this)">X</button>

  </li>

</ul>
0 голосов
/ 01 октября 2018

Здесь есть две проблемы.Во-первых, в вашем селекторе canc отсутствует префикс # для селектора id.Во-вторых, вы создаете дубликаты атрибутов id для элементов button, что недопустимо.Вместо этого вы должны использовать общие классы, такие как: 

$(document).ready(function() {
  $("#lista1").on('click', '.canc', function() {
    $ogg1 = $(this).closest('li');
    $ogg1.remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1">Carne</p>
    <button class="mod badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="canc badge badge-primary badge-pill">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2">Pesce</p>
    <button class="mod badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="canc badge badge-primary badge-pill">X</button>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...