jQuery issue for deleting input field

Question

I'm trying to add an input field when clicking on add, and it should be removed when clicking on delete click.

Here is JS Bin link: JS issue with deletion

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>

I manage to add the input fields properly, but have issues deleting them. They seem to be deleted randomly.

Answer 1

I think your code's logic is working, however, the icon for addition and deletion of inputs is not being rendered.

You can replace your newTextBoxDiv with this:

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>`;

Notice that I added the word "Add" and "Delete" between the tags, so that you have something to click on

Also, I think you need to swap the word "Add" and "Cancel" in the initial HTML to convey a clearer message, as they are now doing the opposite thing.

Another fix that's needed is to replace the id="addMore" with class="addMore"

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

Since id is meant to be unique. In your code, however, when you append new element, you added new elements with duplicate id, making jquery's selector not selecting the element you want.

After replacing id with class, you also need to change the deleteTag function to select the last "addMore" span and show it.

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();
}

For the layout, you need to do it with css, removing float and setting the div tag with appropriate width and display: inline-block. I suggest you use a separate css file to style the elements instead of doing it inline.

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>

Answer 2

I think the add and delete button are mixed up, but I couldn't spend time on analysing the code because it's too much code for something that does very little. The following demo:

• has a single button that adds a row of form controls:
  • a checkbox
  • a text input
  • a button that deletes it's own row as well as itself.

---

Demo

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>