我创建了UI，它添加了带有值的学生输入字段，用户也可以删除该字段。最初我将学生字段值与每个输入字段进行比较，这些字段是为避免重复而创建的，但它仅适用于第一个输入字段值不是为了其他人我也使用了循环，但它不能正常工作，并且无法一次删除一个输入字段。
$('#addBtn').click(function () {
var studentArray = $(".students").text();
var i=" " ;
console.log(studentArray);
var studentSplitResult = studentArray.split('Remove');
console.log(studentSplitResult);
for (var i = 0; i < studentSplitResult.length; i++) {
if ($("#selectStd").val() !== $(".students").val()) {
$(".stdList").show();
var input_value = $('#selectStd').val();
$('ul').append('<input class="students" value="' + input_value + '"><a href="" class="deleteStd">Remove</a></input>');
console.log($(".students").val());
// console.log(studentSplitResult[i]);
};
return false;
}
});
//prevent default action
$(document).on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
});
答案 0 :(得分：2)
您可以像下面这样简化代码。
在使用filter添加之前，只需检查任何文本输入是否具有新值。它还将处理不区分大小写（如果需要，则删除）。
同时删除时请考虑仅删除文本输入。
添加e.preventDefault()以限制表单发布。根据要求更改或删除它。
$('#addBtn').click(function(e) {
e.preventDefault();
var input_value = $("#selectStd").val();
var isValid = $('input.students').filter(function() {
return this.value.toLowerCase() == input_value.toLowerCase();
}).length <= 0;
if (isValid) {
$('ul').append('<input class="students" value="' + input_value + '"><a href="" class="deleteStd">Remove</a></input>');
} else {
alert('Duplicate');
}
});
//prevent default action
$(document).on('click', 'a.deleteStd', function(e) {
e.preventDefault();
$(this).prev('.students').remove();
$(this).remove();
});<body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td><input class="form-control" id="selectStd" placeholder="Please select students"></td>
<td><button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button></td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label><br>
<br>
</ul>
<table>
</table>
</form>
</div>
</div>
</div>
</body>
答案 1 :(得分：1)
我遇到了两个问题：输入验证本身（您的问题）以及单击锚元素时删除元素。
对于输入验证，我已经重写了一下。我做的是
1. Obtain new student value
2. Check if not empty by if(newStudent). If it's empty, nothing happens
3. obtain other inputs
4. match the new input against the values inside other inputs
4a. if match, don't add it.
4b. if no match, add it
要删除元素，您需要修改HTML。它不太正确。我用<section>元素包裹它以保存删除并更正HTML使用。
附注，你也可以重新考虑这个
$(document).on('click', 'a', function(e) {
e.preventDefault();
$(this).parent().remove();
});
如果您的HTML页面有多个锚点（<a>）元素，则此函数也会用于其他锚点元素。如果单击这些，则会在单击时从页面中删除这些内容。如果您不想要它，请修改上述功能。
$('#addBtn').click(function(e) {
// obtain new student value
var newStudent = $('#selectStd').val();
// check if it is not empty
if (newStudent) {
// obtain other names and check if there is no match
var studentArray = $(".students");
var hasMatch = false;
studentArray.each(function(i, el) {
if (el.value === newStudent) {
hasMatch = true;
return; // stopping loop
}
});
// if there is no match, add student
if (!hasMatch) {
$('ul.stdList').append('<section><input class="students" value="' + newStudent + '" /><a href="" class="deleteStd">Remove</a></section>');
}
}
return false;
});
//prevent default action
$(document).on('click', 'a', function(e) {
e.preventDefault();
$(this).parent().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td>
<input class="form-control" id="selectStd" placeholder="Please select students">
</td>
<td>
<button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button>
</td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label>
<br>
<br>
</ul>
</form>
</div>
</div>
答案 2 :(得分：0)
添加时请尝试以下操作：
$('ul').append('<input class="students" value="' + input_value + '"><a href="" class="deleteStd">Remove</a></input>');
不幸的是，这不会导致您的期望。锚点将由您的浏览器添加到输入旁边而不是嵌套。像这样：
<input class="students" value="thevalue" />
<a href class="deleteStd">Remove</a>
因此，如果您之后执行此操作以删除$(this).parent().remove();，则会删除整个容器。
您需要做的是：
$('ul').append('<div><input class="students" value="' + input_value + '" /><a href="" class="deleteStd">Remove</a></div>');
这会奏效。我更新了你的小提琴：https://jsfiddle.net/Lojdfyhn/1/
答案 3 :(得分：0)
因此，根据您的要求，请尝试以下代码：
$('#addBtn').click(function() {
var valueToCheck = $("#selectStd").val();
var flag = true;
$(".students").each(function() {
if ($(this).val() === valueToCheck) {
flag = false;
}
});
if (flag) {
$('ul').append('<span class="addedStudent"><input class="students" value="' + valueToCheck + '" /><a href="" class="deleteStd">Remove</a></span>');
} else {
alert(valueToCheck + " already exists.");
}
return false;
});
//prevent default action
$(document).on('click', 'a.deleteStd', function(e) {
e.preventDefault();
$(this).parents(".addedStudent:first").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td><input class="form-control" id="selectStd" placeholder="Please select students"></td>
<td><button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button></td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label><br>
<br>
</ul>
<table>
</table>
</form>
</div>
</div>
答案 4 :(得分：0)
您正在尝试删除锚标记的父元素。 只需像这样更新你的代码
$('ul').append('<div><input class="students" value="' + input_value + '"><a href="" class="deleteStd">Remove</a></input></div>');
然后单击锚点将删除锚元素的父级。
答案 5 :(得分：0)
您首先需要了解DOM遍历，这可以真正帮助您组织要添加到列表中的学生并删除。
这里可以如下实现简单的解决方案。 首先用“学生”标记所有学生的div标签。类名，并在该div中，将学生文本字段放在＆＃39; stdname＆＃39; class和anchor标签，以帮助删除学生的详细信息。
现在，当用＃stdname＆＃39;遍历所有学生时分类并检查是否存在重复值。
以下是代码，请查看。
并检查jsfiddle。http://jsfiddle.net/naveen_namani/842bf5ke/1/
$('#addBtn').click(function () {
var student_list=document.querySelectorAll(".students .stdname");
var selectStd=document.getElementById("selectStd");
var duplicate=false;
for(var i=0;i<student_list.length;i++) {
if(student_list[i].value==selectStd.value) duplicate=true;
}
if(duplicate==false) {
$('ul').append('<div class="students"><input value="'+selectStd.value+'" class="stdname"/><a href="" class="deleteStd">Remove</a>');
}
return false;
});
$(document).on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style="width:422px;border:1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType" >
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td>
<input class="form-control" id="selectStd" placeholder="Please select students">
</td>
<td>
<button id="addBtn" class="btn btn-default" style="margin-left: 17px;" >Add</button>
</td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label>
<br><br>
</ul>
<table ></table>
</form>
</div>
</div>