1

我试图在单击时添加一个输入字段，单击时add应该将其删除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>

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

4

2 回答 2

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>

于 2019-01-03T19:32:57.157 回答
0

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

你可以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 的选择器无法选择您想要的元素。

将 id 替换为 class 后，还需要更改 deleteTag 函数以选择最后一个“addMore”跨度并显示它。

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 标签设置为适当的宽度和 display: 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>

于 2019-01-03T13:43:22.460 回答