Question

我有一个简单的表单，用户可以填写并添加新表单以添加多个条目。

一切正常，除非我在第一组输入中输入数据并单击创建新成员资格时，它将从表单中获取数据并将其放在文本框中。

我怎么能阻止它？

我尝试了几种不同的方法。

$('#education').find('input:text').val('');
$('#education: input').val('');

然而，这将清除所有条目。

Answer 1

您需要清除克隆元素

下的输入

newDiv.find('input').val('')

演示：Fiddle

您的选择器正在选择#education容器中的所有输入元素，这不是您想要的。 newDiv变量引用新创建的元素，因此您可以使用它来查找in中的输入元素然后将其清除

Answer 2

在newDiv上调用find，而不是#education中的所有输入。

<强> Updated fiddle

newDiv.find('input:text').val('');

＆＃13;

var ed = 1;

function new_education() {
    ed++;
    var newDiv = $('#education div:first').clone();
    newDiv.attr('id', ed);
    var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
    newDiv.find('tr:first th').text('Education ' + ed);
    newDiv.append(delLink);
    
    newDiv.find('input:text').val(''); // <----------- added this
    
    $('#education').append(newDiv);
}

function deled(eleId) {
    d = document;
    var ele = d.getElementById(eleId);
    var parentEle = d.getElementById('education');
    parentEle.removeChild(ele);
    //ed--;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
    <div id="1">
        <table border=3>
            <tr>
                <th colspan="4" style="background-color:#b0c4de;">Education 1</th>
            </tr>
            <tr>
                <td>
                    <label>School Name</label>
                    <input type="text" name="schoolname[]" maxlength="30" size="30"/>
                </td>
                <td>
                    <label>Degree Type</label>
                    <input type="text" name="degreetye[]" maxlength="30" size="30"/>
                </td>
                <td>
                    <label>Degree Field</label>
                    <input type="text" name="degreefield[]" maxlength="30" size="30"/>
                </td>
            </tr>
        </table>
    </div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

＆＃13;

如何从JQuery Div中清除输入数据

2 个答案: