Jquery или JavaScript - удалить элемент из массива

Question

У меня есть список выбора, когда элемент нажимается, элемент добавляется в div. Список состоит из пользователей из вызова PHP.

Теперь я хочу удалить элемент из списка при нажатии.

Как я могу удалить элемент из списка, не нарушая мой код?

Вот JavaScript:

$(function() {
  var myUsers = new Array();
  $("#keyword").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "dist_user_search.php",
        data: {
          term: $('#keyword').val()
        },
        dataType: "json",
        success: function(data) {
          console.log('success');
          var res = [];
          for (var item of data) {
            if (item['myResult']) {
              res.push(item['myResult']);
            }
          }
          response(res);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      if (myUsers.indexOf(ui.item.value) < 0) {
        myUsers.push(ui.item.value);
        var str = "";
        myUsers.forEach(function(myUser) {
          str = '<li>' + myUser + '</li>' // build the list
        });
        $('#log').append('<div>' + str + '</div>'); // append the list
        $('#keyword').val('');
        return false;
      } else {
        $('#keyword').val('');
        return false;
      }
    }
  });
});

HTML:

<div class="ui-widget">
  <label for="keyword">Users: </label>
  <input id="keyword">
</div>


<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

javascript jquery

2

user1098063 28 Авг 2017 в 22:25

Answer 1

Вы можете добавлять обработчики кликов к элементам li каждый раз, когда перестраиваете список.

var myUsers = new Array();
$("#keyword").autocomplete({
  source: function (request, response) {
    var res = [];
    for (var i = 0; i < 3; i++) {
      res.push("Item " + i);
    }
    response(res);
  },
  minLength: 0, // Just for testing, set this to 0
  select: function (event, ui) {
    if (myUsers.indexOf(ui.item.value) < 0) {
      myUsers.push(ui.item.value);
      var str = "";
      // Notice how I changed 'str =' to 'str +='
      myUsers.forEach(function(myUser) {
        str += '<li>' + myUser + '</li>'
      });
      // Changed 'append' to 'html' to always show an up-to-date list
      $('#log').html('<div>' + str + '</div>');
      $("#log li").off("click").click(function () {
        var removed = $(this).remove().text();
        $("#removed").append(removed + ", ");
        // Added this, to clear the user from the 'myUsers' array as well.
        myUsers.splice(myUsers.indexOf(removed));
      });
    }
    $('#keyword').val('');
    return false;
  }
});

.ui-helper-hidden-accessible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="ui-widget">
  <label for="keyword">Users: </label>
  <input id="keyword">
</div>
<div style="margin-top: 100px;"><ul id="log"></ul></div>
<div id="removed">Removed: </div>

Изменить: изменен код, чтобы больше походить на ваш сценарий, я отметил с комментариями, что я думаю, что исправит несвязанную ошибку и причину, по которой вы не видите пользователей во второй раз.

0

Marco de Zeeuw 28 Авг 2017 в 21:37

Answer 2

Я использую этот код и работает нормально:

     //get the index of item
     var index = myArray.indexOf("itemToRemove");
     //if exists
     if (index > -1) {
       //remove
        myArray.splice(index, 1);
     }

0

sergioBertolazzo 28 Авг 2017 в 19:50

Answer 3

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

Когда я удаляю, я удаляю из div и массива одновременно.

 <script>
  $( function() {

  var myUsers = new Array();



    $( "#keyword" ).autocomplete({
   source: function( request, response ) {


        $.ajax( {
          url: "dist_user_search.php",
          data: {term : $('#keyword').val()},
          dataType: "json",
          success: function( data ) {
          console.log('success');
          var res = [];
          for (var item of data){
          if (item['myResult']){
            res.push(item['myResult']);
            }
          }

          response( res );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {


      if(myUsers.indexOf(ui.item.value) < 0){
        myUsers.push(ui.item.value);


        var str = "";
        myUsers.forEach(function(myUser){
        str = '<li>' + myUser + ' X </li>' // build the list
        });

        $('#log').append('<div>' + str + '</div>'); // append the list


         $("#log li").off("click").click(function () {
    var $this = $(this);
    $("#removed").append($this.text() + ", ");
    $this.remove();

    //remove from array..
    myUsers.splice($.inArray($this, myUsers),1);

    //debug show array.
    //alert(myUsers);

  });


       $('#keyword').val(''); return false;

       } 


      }
    } );


    //console.log(myUsers);
  } );


  </script>

0

user1098063user1098063 29 Авг 2017 в 15:34

Jquery или JavaScript - удалить элемент из массива

3 ответа

Похожие вопросы

Новые вопросы

javascript