Как удалить / добавить одно или несколько конкретных значений из объекта с помощью jQuery Ajax?

Question

Мне удалось добавить / удалить весь объект из файла JSON с помощью jQuery Ajax.Но я не мог понять, как удалить или добавить конкретное значение из объекта.

Это первый элемент «агентов» объекта в моем файле JSON, и есть еще 7 из них с идентификатором 2-8,

"agents": [{
  "name": "bjstdmngbdr01",
  "os": "windows",
  "status": "idle",
  "type": "physical",
  "ip": "192.168.1.102",
  "location": "/var/lib/test",
  "resources": [
    "Firefox",
    "Safari",
    "Ubuntu",
    "Chrome"
  ],
  "id": 1
}]

Я действительно хочу знать, как удалить значение внутри «ресурсов», например, если я нажму кнопку A, удалите «Firefox»;если я нажму кнопку B, удалите «Safari».

добавьте HTML-часть:

<div class='sitecontent--agents__item'>
      <div class='item-image'> <img src='images/" + agent.os + ".png' alt=''> </div>
      <div class='item-right'>
        <div class='item-name'>
          <p> <i class='icon-desktop'></i>" + agent.name + "<span class='item-status "+ agent.status +"'>" + agent.status + "</span> </p>
        </div>
        <div class='item-ip-path'>
          <div class='item-ip'>
            <p><i class='icon-info'></i>" + agent.ip + "</p>
          </div>
          <div class='item-path'>
            <p><i class='icon-info'></i>" + agent.location + "</p>
          </div>
        </div>
        <div class='item-resources'>
          <div class='resources-add'> <i class='icon-plus'></i> </div>
          <div class='existingResources'>
            <div class='existingResources__item'> <span> " + agent.resources[0] + " <button data-id='1' class='icon-trash remove'></button> </span> </div>
            <div class='existingResources__item'> <span> " + agent.resources[1] + " <button data-id='2' class='icon-trash remove''></button> </span> </div>
            <div class='existingResources__item'> <span> " + agent.resources[2] + " <button data-id='3' class='icon-trash remove''></button> </span> </div>
            <div class='existingResources__item'> <span> " + agent.resources[3] + " <button data-id='4' class='icon-trash remove''></button> </span> </div>
          </div>
        </div>
        <div class='test'>"+ agent.resources + " </div>
      </div>
    </div>

Jquery ajax delete:

$('.sitecontent--agents__listing').delegate('.remove','click',function(){<br>
var $item = $(this).closest('.existingResources__item');
$.ajax({
  url: '/agents/' + $(this).attr('data-id'),
  type: 'delete',
  data: {},
  success: function(){
    $item.fadeOut(500,function(){
      $(this).remove();
    });
  }
    });
  });

В моем html каждый ресурс имеетих собственный div и кнопка удаления внутри.Когда кнопка нажата, этот конкретный ресурс должен быть удален как из внешнего интерфейса, так и из файла json.Прямо сейчас я понятия не имею, чтобы сделать это.