删除输入字段的jQuery问题

Question

我试图在点击add时添加一个输入字段，点击delete点击时应该将其delete 。

这是JS Bin链接： JS 删除问题

 var newTextBoxDiv; var rowCount = 0; var counter = 1; var delCounter = 1; $(document).ready(function() { $(document).on('focus', '.txtFocus', function() { $(this).next('.clearContent').hide() }); $(document).on('focusout', '.txtFocus', function() { $('.clearContent').show() }) }); function addTags(obj) { var newTextBoxDiv = '<div class="col-md-4 TextBoxMainDiv"><div style=""><div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px;float:left;width:80%;"><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" class="txtFocus" required placeholder="Add Tag" autocomplete="false" style="width: 100%" ><span class="clearContent"><a href="#" onClick="deleteTag(this);"><i class="fas fa-times"></i></a></span> </div><div style="width: 15%;display: inline-block;text-align:right;"><span id="addMore" onClick="addTags(this);"><a href="#"><i class="fas fa-plus-square"></i></a></span></div></div></div>'; $(obj).hide(); $("#tagElement").append(newTextBoxDiv); $('.txtFocus').focus(); counter++; if (counter == 1) { $(obj).show() } } function deleteTag(obj) { $(obj).closest('.TextBoxMainDiv').last().find('#addMore').show(); $(obj).closest('.TextBoxMainDiv').last().find('#addMore').css('display', 'block'); $(obj).closest('.TextBoxMainDiv').remove(); counter--; if (counter == 1) { $('#addMore').show() } }

 <div class="row"> <div id="tagElement"> <div>&nbsp;</div> <div class="col-md-4 TextBoxMainDiv"> <div style=""> <div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px;float:left;width:80%;"> <input type="text" class="txtFocus" required placeholder="Add Tag" id="textBox" autocomplete="false" autofocus="autofocus" style="width: 100%"> <span class="clearContent"> <a href="#" onClick="deleteTag(this);">Add</a> </span> </div> <div style="width: 15%;display: inline-block;text-align:right;"> <span id="addMore" onClick="addTags(this);"> <a href="#">cancel</a> </span> </div> </div> </div> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

我设法正确添加了输入字段，但在删除它们时遇到了问题。 它们似乎被随机删除。

Answer 1

我认为添加和删除按钮混淆了，但我无法花时间分析代码，因为代码太多，但功能很少。 以下演示：

• 有一个添加一行表单控件的按钮：
  • 一个复选框
  • 文本输入
  • 一个删除它自己的行以及它自己的按钮。

---

演示

 var index = 0; var template = ` <figure class='frame'><input class='status' type='checkbox'><label class='tag'></label><input class='text' type='text' placeholder='Enter New Task'><button class='del' type='button'>&#10134;</button></figure>`; $('.set').on('click', 'button', function(e) { if ($(this).hasClass('add')) { index++; $('.set').prepend(template); $('.status:eq(0)').attr('id', 'chx' + index); $('.tag:eq(0)').attr('for', 'chx' + index); } else { $(this).prevUntil('.del, .add').add(this).remove(); } });

 .set { position: relative; padding: 2px 0 1px 2px; min-height: 28px; border-radius:7px; } .frame { padding: 0; margin: 0; min-width:90vw; } .add { position: absolute; right: 6px; top: 3px; display:block; } .status { display: none } .tag { display: inline-table; font-size: 28px; line-height: 1; vertical-align: middle } .tag::before { content: '\\2610'; } .status:checked+.tag::before { content: '\\2611' } .text { display:inline-table; width: 75%; margin: 2px 5px 0 }

 <form id='ui'> <fieldset class='set'> <figure class='frame'> <input id='chx0' class='status' type='checkbox'> <label for='chx0' class='tag'></label> <input class='text' type='text' placeholder='Enter New Task' style='margin:2.5px 2px 0 0' autofocus> <button class='del' type='button'>&#10134;</button> </figure> <button class='add' type='button'>&#10133;</button> </fieldset> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

我认为您的代码的逻辑正在运行，但是，未呈现用于添加和删除输入的图标。

你可以用这个替换你的newTextBoxDiv ：

var newTextBoxDiv = `
    <div class="col-md-4 TextBoxMainDiv">
        <div style="">
            <div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px; float:left; width:80%;">
                <input type="text" name="textbox${counter}" id="textbox${counter}" value="" class="txtFocus" required placeholder="Add Tag" autocomplete="false" style="width: 100%" >
                <span class="clearContent">
                    <a href="#" onClick="deleteTag(this);">Delete<i class="fas fa-times"></i></a>
                </span>
            </div>
        <div style="width: 15%;display: inline-block;text-align:right;">
            <span id="addMore" onClick="addTags(this);">
                <a href="#">Add</a>
            </span>
        </div>
    </div>`;

请注意，我在标签之间添加了“添加”和“删除”一词，以便您可以单击

此外，我认为您需要交换初始 HTML 中的“添加”和“取消”一词以传达更清晰的信息，因为它们现在正在做相反的事情。

需要的另一个修复是将id="addMore"替换为class="addMore"

<span class="addMore" onClick="addTags(this);">

因为 id 是唯一的。 但是，在您的代码中，当您追加新元素时，您添加了具有重复 id 的新元素，从而使 jquery 的选择器无法选择您想要的元素。

用class替换id后，还需要修改deleteTag函数，选择最后一个“addMore”span并显示出来。

function deleteTag(obj) {
    $(obj).closest('.TextBoxMainDiv').last().find('.addMore').show();
    $(obj).closest('.TextBoxMainDiv').last().find('.addMore').css('display', 'block');
    $(obj).closest('.TextBoxMainDiv').remove();
    counter--;
    $('.addMore').last().show();
}

对于布局，您需要使用 css 来完成，移除浮动并将 div 标签设置为适当的宽度和显示：inline-block。 我建议您使用单独的 css 文件来设置元素的样式，而不是内联。

 function deleteTodo() { $(this).parent().remove(); } function addTodo() { var inputTemplate = '<div class="todo-input-wrapper">' + '<input class="todo-input" type="text" placeholder="Add Tag" />' + '<button class="delete-button">Delete</button>' + '</div>'; $('.todo-wrapper').append(inputTemplate); $('.delete-button').last().on('click', deleteTodo); $('.todo-input').last().focus(); } $(document).ready(function () { $('.delete-button').on('click', deleteTodo); $('.add-button').on('click', addTodo); });

 .todo-wrapper { display: inline-block; width: max-content; font-size: 0; } .todo-input-wrapper { margin: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="todo-wrapper"> <div class="todo-input-wrapper"> <input class="todo-input" type="text" placeholder="Add Tag" /> <button class="delete-button">Delete</button> </div> </div> <button class="add-button">Add</button>