我正在尝试构建一种表单结构,可以在其中添加或删除数组中的链接,并且用户对他们创建的链接感到满意时,可以提交填充有标题/链接对象的数组。
目前,我已经成功添加了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);
});
});