删除关联的链接并从数组中删除关联的对象

Question

我正在尝试构建一种表单结构，可以在其中添加或删除数组中的链接，并且用户对他们创建的链接感到满意时，可以提交填充有标题/链接对象的数组。

目前，我已经成功添加了jQuery功能，以将链接添加到对象，将它们附加到数组，然后在表单下方显示添加的链接，但是我不确定如何处理链接的删除。 / p>

我有一个div，其中包含创建的链接，该div与一个“ x”配对，该x应该在单击时从数组中删除链接和对象，但目前所有发生的是“ x”为消失了如果在同一<div>中找到两个链接，是否不应该使用.parent().remove()方法将它们都删除？我的.filter()函数也没有从数组中删除对象。

这是我的JS Bin：

https://jsbin.com/luxavucusi/edit?html,js,console,output

这是不起作用的jQuery代码段：

// Remove Displayed Link
         $(this).parent().remove();

         // Grab data attribute from "x" linked to report link
         var elementLink = $(this).data("link");
         console.log(elementLink);

         // Filter the report link array for grabbed data attribute link and remove object from array
         var linksRemoval = links.filter(function(value, index, arr){
           console.log(value)
           return value.link !== elementLink
         })

这是我的完整jQuery：

$(function() {


   // Display Added Links Function
   function linksDisplay(title, link){
     // If "title" field is blank, use the value from the "link" field
     if (title === "" || !title){
       return "<div><a href='" + link + "'>" + link + "</a><a href='#' class='remove-link' data-link='" + link + "'>x</a></div>";
     } else {
       return "<div><a href='" + link + "'>" + title + "</a><a href='#' class='remove-link' data-link='" + link + "'>x</a></div>";
     }

   }

   // Array to store collection of link objects to be passed on form submission
   var links = [];

   // Add Link button click
    $("#linkForm").click(function() {
      console.log("Button Clicked")

      // Individual link object
      var individualLink = {};

      // Pass value from "title"
      individualLink.title = $('input#title').val();

      // Pass value from "title"
      individualLink.link = $('input#link').val();

      // Pass individual report object to links array
      links.push(individualLink);

      console.log(individualLink);
      console.log(links.length);
      console.log(JSON.stringify(links));

      // Display newly added link to div below form
      $(".report-links").append(linksDisplay(individualLink.title, individualLink.link));
    });

   // Form submission 
   $("#submit").click(function(){
      console.log("Submit Clicked")
      console.log(JSON.stringify(links));
   })

   // Remove Link Click
   $(document).on("click", ".remove-link", function(){
     console.log("Remove Link Clicked")

     // Remove Displayed Link
     $(this).parent().remove();

     // Grab data attribute from "x" linked to report link
     var elementLink = $(this).data("link");
     console.log(elementLink);

     // Filter the report link array for grabbed data attribute link and remove object from array
     var linksRemoval = links.filter(function(value, index, arr){
       console.log(value)
       return value.link !== elementLink
     })
     console.log(links);
   });

 });