Question

如何从数组中删除对象。？

我创建了一个array，此数组的每个元素都包含一个object。此外，该数组已与HTML table相关联。我如何创建一个函数，如果我点击row的{{1}}中的删除按钮，它将删除该特定table，但也会删除该特定row object。

Answer 1

您可以使用splice从数组中删除项目。然后，您可以隐藏表格中的元素，或者按照target按钮或单击来获取该元素。最后，如果有后端，您可以向后端发出DELETE请求。

Answer 2

使用拼接

 $.each(someArray, function(i){
        if(someArray[i].name === 'Sample') {
            someArray.splice(i,1);
            return false;
        }
    });

或使用JQuery.grep

someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Sample';
});

或过滤

var filtered = someArray.filter(function(el) { return el.Name != "Sample"; });

Answer 3

您需要两个删除器，一个将从tr中移除table元素，另一个将从object移除array。您可以使用单击的元素从目标中找到元素，然后使用removeChild将其从父节点中删除。最后，您可以使用splice从数组中删除对象。

请检查此实施。

var array = [];
var rowButtons = document.querySelectorAll('td > div');
rowButtons.forEach(function(button) {
  var object = {
    id: button.id.split('_')[1],
    name: button.id
  };
  array.push(object);
  button.addEventListener('click', function() {
    var index = this.id.split('_')[1];
    console.log(index);
    if (index > -1) {
      var trNode = this.parentNode.parentNode;
      if (trNode.nodeName && trNode.nodeName === 'TR') {
        trNode.parentNode.removeChild(trNode); // remove from table
      }
      array.splice(index, 1); //remove from array
    }
  });
});

<style type="text/css">
  .tg {
    border-collapse: collapse;
    border-spacing: 0;
    border-color: #aabcfe;
  }
  
  .tg td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #aabcfe;
    color: #669;
    background-color: #e8edff;
  }
  
  .tg th {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #aabcfe;
    color: #039;
    background-color: #b9c9fe;
  }
  
  .tg .tg-jb4r {
    background-color: #c0c0c0;
    color: #333333;
    text-align: center;
    vertical-align: top
  }
  
  .tg .tg-n1xd {
    background-color: #efefef;
    color: #333333;
    vertical-align: top
  }
  
  .tg .tg-yjn3 {
    background-color: #ffffff;
    color: #333333;
    vertical-align: top
  }
  
  .tg .tg-ggmw {
    background-color: #efefef;
    color: #333333;
    text-align: right;
    vertical-align: top
  }
  
  .tg .tg-kybs {
    background-color: #ffffff;
    color: #333333;
    text-align: right;
    vertical-align: top
  }
</style>
<table class="tg">
  <tr>
    <th class="tg-jb4r">No</td>
      <th class="tg-jb4r">Competition</td>
        <th class="tg-jb4r">John</td>
          <th class="tg-jb4r">Adam</td>
            <th class="tg-jb4r">Robert</td>
              <th class="tg-jb4r">Paul</td>
                <th class="tg-jb4r">Action</td>
  </tr>
  <tr>
    <td class="tg-n1xd">1</td>
    <td class="tg-n1xd">Swimming</td>
    <td class="tg-ggmw">1:30</td>
    <td class="tg-ggmw">2:05</td>
    <td class="tg-ggmw">1:15</td>
    <td class="tg-ggmw">1:41</td>
    <td class="tg-ggmw">
      <div id="tr_0">Delete</div>
    </td>
  </tr>
  <tr>
    <td class="tg-yjn3">2</td>
    <td class="tg-yjn3">Running</td>
    <td class="tg-kybs">15:30</td>
    <td class="tg-kybs">14:10</td>
    <td class="tg-kybs">15:45</td>
    <td class="tg-kybs">16:00</td>
    <td class="tg-kybs">
      <div id="tr_1">Delete</div>
    </td>
  </tr>
  <tr>
    <td class="tg-n1xd">3</td>
    <td class="tg-n1xd">Shooting</td>
    <td class="tg-ggmw">70%</td>
    <td class="tg-ggmw">55%</td>
    <td class="tg-ggmw">90%</td>
    <td class="tg-ggmw">88%</td>
    <td class="tg-ggmw">
      <div id="tr_2">Delete</div>
    </td>
  </tr>
</table>

如何从数组中删除和对象

3 个答案: