Creating an undo feature for a dynamically generated checklist of checkboxes

Question

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created.

Here is a link to my code on JSFiddle:

My code on JSFiddle

Code snippet:

$(document).ready(function() {
  $('#btnSave').click(function() {
    addCheckbox($('#txtName').val());
    txtName.value="";
  });
});

function addCheckbox(name) {
  var container = $('#cblist');
  var inputs = container.find('input');
  var id = inputs.length+1;

  $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
  $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
  $('<br/>').appendTo(container);
}

javascript jquery html css

Answer 1

Answer №1

Visit this link

Here is the HTML code for a New CheckList Template:

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>

<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="btnRemove" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

And here is the JS code that goes along with it:

 $(document).ready(function() {
        $('#btnSave').click(function() {
            addCheckbox($('#txtName').val());
             txtName.value="";
        });
        $("#btnRemove").click(removeCheckbox);

    });

    function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;

       $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
       $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
       $('<br/>').appendTo(container);

    }

    function removeCheckbox(){
        var container = $('#cblist');
        container.children('input').last().remove();
        container.children('label').last().remove();
        container.children('br').last().remove();
    }

Answer 2

Visit this link

Here is the HTML code for a New CheckList Template:

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>

<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="btnRemove" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

And here is the JS code that goes along with it:

 $(document).ready(function() {
        $('#btnSave').click(function() {
            addCheckbox($('#txtName').val());
             txtName.value="";
        });
        $("#btnRemove").click(removeCheckbox);

    });

    function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;

       $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
       $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
       $('<br/>').appendTo(container);

    }

    function removeCheckbox(){
        var container = $('#cblist');
        container.children('input').last().remove();
        container.children('label').last().remove();
        container.children('br').last().remove();
    }

Answer 3

Answer №2

Ensure that your newly added elements are enclosed in a small container before attaching them to the cblist. When deleting the last checkbox, make sure to delete the container along with the label and line break element as well:

$(document).ready(function() {
  $('#btnSave').click(function() {
    addCheckbox($('#txtName').val());
    txtName.value = "";
  });
  $('#btnRemove').click(function() {
    $(".New_CB").last().remove();
  });
});

function addCheckbox(name) {
  var container = $('#cblist');
  var inputs = container.find('input');
  var id = inputs.length + 1;

  var CBContainer = $("<span class='New_CB'/>");
  $('<input />', {
    type: 'checkbox',
    id: 'cb' + id,
    value: name
  }).appendTo(CBContainer);
  $('<label />', {
    'for': 'cb' + id,
    text: name
  }).appendTo(CBContainer);
  $('<br/>').appendTo(CBContainer);
  CBContainer.appendTo(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h1 id="tit">New CheckList Template </h1>
<hr>
<br>

<form action="page being sent to">
  Company Name:
  <input type="text" name="FirstName" value="">
  <br>
  <br>
  <div id="cblist">
  </div>
  <br>
  <input type="text" id="txtName" />
  <input type="button" value="Add Checkbox" id="btnSave" />
  <input type="button" value="Remove Checkbox" id="btnRemove" />
  <br>
  <br>
  <input type="submit" value="Save Company Template">
  <input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

Answer 4

Ensure that your newly added elements are enclosed in a small container before attaching them to the cblist. When deleting the last checkbox, make sure to delete the container along with the label and line break element as well:

$(document).ready(function() {
  $('#btnSave').click(function() {
    addCheckbox($('#txtName').val());
    txtName.value = "";
  });
  $('#btnRemove').click(function() {
    $(".New_CB").last().remove();
  });
});

function addCheckbox(name) {
  var container = $('#cblist');
  var inputs = container.find('input');
  var id = inputs.length + 1;

  var CBContainer = $("<span class='New_CB'/>");
  $('<input />', {
    type: 'checkbox',
    id: 'cb' + id,
    value: name
  }).appendTo(CBContainer);
  $('<label />', {
    'for': 'cb' + id,
    text: name
  }).appendTo(CBContainer);
  $('<br/>').appendTo(CBContainer);
  CBContainer.appendTo(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h1 id="tit">New CheckList Template </h1>
<hr>
<br>

<form action="page being sent to">
  Company Name:
  <input type="text" name="FirstName" value="">
  <br>
  <br>
  <div id="cblist">
  </div>
  <br>
  <input type="text" id="txtName" />
  <input type="button" value="Add Checkbox" id="btnSave" />
  <input type="button" value="Remove Checkbox" id="btnRemove" />
  <br>
  <br>
  <input type="submit" value="Save Company Template">
  <input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

Answer 5

Answer №3

To implement a removal feature, include a button that triggers the elimination of the last checkbox input when clicked:

$('#remove').click(function(){
    $('#cblist input').last().remove();
    $('#cblist label').last().remove();
    $('#cblist br').last().remove();
});

Answer 6

To implement a removal feature, include a button that triggers the elimination of the last checkbox input when clicked:

$('#remove').click(function(){
    $('#cblist input').last().remove();
    $('#cblist label').last().remove();
    $('#cblist br').last().remove();
});

Answer 7

Answer №4

Locate and delete the most recent checkbox that was added.

JavaScript :

$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
         txtName.value="";
    });
    $('#removeCheckbox').click(function(){
    var cb=$( "#cblist input" ).last();
    if(cb && cb.length){
       cb.remove();
    }
});
});
function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   checkbox= $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
   $('<br/>').appendTo(container);

}

HTML :

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>




<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="removeCheckbox" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

Demo : https://jsfiddle.net/vikashvverma/kf2mq20e/10/

Answer 8

Locate and delete the most recent checkbox that was added.

JavaScript :

$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
         txtName.value="";
    });
    $('#removeCheckbox').click(function(){
    var cb=$( "#cblist input" ).last();
    if(cb && cb.length){
       cb.remove();
    }
});
});
function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   checkbox= $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
   $('<br/>').appendTo(container);

}

HTML :

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>




<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="removeCheckbox" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

Demo : https://jsfiddle.net/vikashvverma/kf2mq20e/10/

Creating an undo feature for a dynamically generated checklist of checkboxes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

determine function output based on input type

Create a dynamic animation using Angular to smoothly move a div element across the

Creating a dynamic webpage where multiple images are displayed on a single canvas using

Displaying images in a carousel below a fixed navigation bar using Bootstrap

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

Guide on incorporating a dropdown menu within a Jssor slider

Creating a personalized pivot-table using the WebDataRock Javascript library with a unique configuration based on a

ERROR: Module 're2' not found in './build/Release/re2' (npm)

"Relating to meteorjs, admin users are akin to those in

What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

What is the best way to pick out specific passages of text

What steps can I take to create a responsive jQuery UI buttonset?

The connection between MongoClient and Express has been established successfully, however, an error occcurred: TypeError: Cannot read the property 'collection' of null

The NextJS Link component does not seem to be receiving the styles from Tailwindcss

Tips for showcasing a designated set of numbers in Vue Js while iterating?

Utilizing a variable within an Angular filter: A step-by-step guide

Comparing inline-block and block display options for displaying images

Button click event not triggering JavaScript execution

Align the Media center div within a column utilizing Bootstrap

Transitioning from Bootstrap 4 to Bootstrap 5 raises concerns about container compatibility