我试图将用户选择的项目存储到对象中，这样当用户单击“删除按钮”时，它也会从我的对象中删除该项目。我似乎遇到了一个错误，只有数组中的第一个对象将被删除，其他对象将不会被删除。我能得到一些帮助吗？
每个li都有一个数据id值i，其中i是一个整数，对于用户添加到列表中的每个项目，i都会递增一次，例如：用户单击“添加”
数据id:1
用户单击添加
数据id:2
等等，当前当用户单击“删除…”时，它将仅删除id为0的对象。。但是，单击列表中的任何其他项不会影响exercisedataarr
编辑：包括我的html文件，这是一个python flask应用程序，我使用jinja模板和wtforms生成表单，因为我有一个动态选择字段，它使用我的数据库从数据库中提取练习名称，供用户选择以构建例程。
createroutine.html

{% extends 'profileSignedInBase.html' %}

{% block content %}
<div>
  <div id="media">
    <div>
      <form action="/workoutroutines">
        {{form.hidden_tag()}}

        {% for field in form if field.widget.input_type != 'hidden' %}

        {{ field(placeholder=field.label.text) }}
        {% endfor %}

        <button id="createBtn">CREATE</button>
      </form>

      <div>

        <button id="addBtn">Add Exercise To List</button>
      </div>

      <h1>This is what you have planned for your routine</h1>
      <ol id="routineWishlist">

      </ol>
    </div>
  </div>
  <script src="/static/addExercise.js"></script>
  {% endblock %}

addexercise.js

let jsonData = {}
let exerciseDataArr = []
let i = 0;

// generate list of items the user has selected for their workout
    document.querySelector("#media").addEventListener("click", function (e) {

//Add Item to 
  if (e.target.id == "addBtn") {
    e.preventDefault();
    var exerciseValue = $('#exerciseChoices').find(":selected").text();
    var workoutName = $('#workoutName').val();
    var workoutDescription = $('#description').val();

    if (workoutName == "") {
      console.log("please fill out all data")
      alert("please add a name")
      return;
    }
    if (workoutDescription == "") {
      console.log("please fill out all data")
      alert("please add a description")
      return;
    }
    console.log("You clicked on the Add button")
    var li = document.createElement("li");
    var div = document.createElement("div")
    var remove = document.createElement("button");
    li.setAttribute("data-id", i)
    div.setAttribute("id", `exercise${i}`)
    remove.setAttribute("id", "removeBtn");

    remove.innerText = 'Remove';

    try {
      jsonData['name'] = workoutName;
      jsonData['description'] = workoutDescription;
      exerciseDataArr.push({ 'exercise': exerciseValue,
     id: i})
    } catch (error) {
      console.error(error)
    }

    i++;
    console.log(jsonData)      //{"name": "workout 1","description": "My favorites"}
    console.log(exerciseDataArr) //After adding 2 exercises to the list {"exercise": "2 Handed Kettlebell Swing","id": 0}{"exercise": "2 Handed Kettlebell Swing","id": 1}

    var t = document.createTextNode(exerciseValue);
    div.append(li)
    li.append(remove);
    li.appendChild(t);
    document.querySelector("#routineWishlist").appendChild(div);

  }
  if (e.target.id === "removeBtn") {
    e.preventDefault();

    exerciseName = $(e.target).closest('div').attr('id');
    exerciseOrder = parseInt($(e.target).closest('li').attr('data-id'));
    console.log("remove " + typeof(exerciseOrder) + " " + exerciseOrder + " at " + exerciseName )
    console.log("inside " + typeof(exerciseDataArr)) //object
    //remove from displayed list of exercises
    $(e.target).closest('div').remove()

    // remove from object
    for(let val in exerciseDataArr){
      val = parseInt(val)
      console.log(`id: ${val}`)
      // if the exerciseDataArr contains id: exerciseOrder delete from exerciseDataArr
      if(exerciseDataArr.hasOwnProperty("id") == exerciseOrder   ){// <---does not activate unless the first 'li' is clicked. 
        console.log("the object has been found, now delete it")
        delete exerciseDataArr[exerciseOrder]
        val = undefined;
      }
    }
    console.log(exerciseDataArr)

  }