Simple dynamic list with checkbox

Question

Looking for a way to make a dynamic list using checkbox "another item" with ability to remove if requested, like on this image:

It should support both adding and removing the items.

Edit:

My code is like:

<div id="contactdetails">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-list"></i></span>
          <input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
        </div>
        <p class="note">Example: Mike</p>
      </div><!--row and col-->

      <div class="col-lg-6 col-md-12">
          <div class="form-group">
              <div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
                <input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
              </div>
            <p class="note">Example: Johnson</p>
          </div>
      </div>
    </div> <!--row and col-->

 <div class="row">
      <div class="col-lg-12 col-md-12">
       <div class="checkbox" style="padding-left:10px; margin-top: 0px;">
          <span>
            <label>
              <input name="addmore" id="addmore" type="checkbox" class="checkbox style-2"> 
              <span> More contacts</span> 
            </label>
          </span>
        </div>
      </div>
    </div> <!--row and col-->

</div><!--contact details-->

Will clicking on any given checkbox delete any further list items? — RobertoNovelo
– RobertoNovelo, Commented Feb 23, 2016 at 22:39
Look into clone function. Here's an example : jsfiddle.net/DinoMyte/sgcrupm8 — DinoMyte
– DinoMyte, Commented Feb 23, 2016 at 22:41
@RobertoNovelo Yes, related to this checkboxes. If you created the new item by checking the checkbox, unchecking the same checkbox will delete previously created item. — user2988257
– user2988257, Commented Feb 23, 2016 at 22:41
@DinoMyte, not helping, it will not work with remove/unchecking. also it clones the checkbox as checked imgur.com/jMYpt8w — user2988257
– user2988257, Commented Feb 23, 2016 at 22:44

RobertoNovelo · Accepted Answer · 2016-02-23 23:24:12Z

1

You can append items to a container and remove each item if the checkbox is checked.

$("body").on("click","input[type='checkbox']",function()
{
  if(!$(this).is(":checked"))
  {
    $(this).parent().remove();
  }
  else
  {
    $("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>
</div>

answered Feb 23, 2016 at 23:24

RobertoNovelo

3,8503 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2988257 Over a year ago

Yes, exactly what I need. The only thing, how the checkbox "unselect" can remove the next text boxes and not the current?

RobertoNovelo Over a year ago

Use $(this).parent().nextAll().remove() instead 👌

DinoMyte · Accepted Answer · 2016-02-23 22:58:28Z

1

Try this. As i mentioned before, you can make use of $.clone() to achieve this.

<div>
<table>
<tr>
  <td>
    Item1
  </td>
  <td>
    Item2
  </td>
</tr>
<tr>
  <td>
    <input type="checkbox">
  </td>
</tr>    
</table>    
</div>
<script>
    $(document).on("click",":checkbox",function()
    {
     if($(this).is(":checked")) 
      {
        var clonedItem = $(this).closest('table').clone(); 
        $(clonedItem).find(":checkbox").removeAttr("checked");
        $(clonedItem).appendTo("div");   
      }
      else
      {
        if($(document).find(":checkbox").length > 0)
        $(this).closest('table').remove();
      }
    });
</script>

Example : https://jsfiddle.net/DinoMyte/sgcrupm8/1/

answered Feb 23, 2016 at 22:58

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

1 Comment

user2988257 Over a year ago

This one looks what i want, but i can't adopt it to work without table. I have only divs - see my code updated in original question.

Collectives™ on Stack Overflow

Simple dynamic list with checkbox

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related