2

I need one help. I need to add the child element using button click in Javascript/Jquery.I am explaining my code below.

<div class="form-group" id="intro-box">
    <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
    <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;" onclick="addMore();">
    <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
  </div>
  <script>
    function addMore(){
      $('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname" placeholder="Label Name" value="">');
    }
  </script>

Here i need , initially one text field and + button. when user will click on plus(+) button below the first text field one new text field will create with different id(i.e-introlabelname2) and one plus ,minus button will create and the first text field will remain with minus button. suppose user will click on minus button of the second text field that particular field will erase and again plus button will remain with first text field and so on. Here is my plunkr code. Please help me.

Improve this question
5
  • Possible duplicate of Create div element and dynamically add child elements on it and/or Append Vs AppendChild JQuery and/or Creating a div element in jQuery and/or Javascript: AppendChild Commented Oct 15, 2016 at 6:55
  • my problem is little bit different from that post. Commented Oct 15, 2016 at 6:58
  • No,i have only problem to place + and - button in proper place. I have plunkr code already. Commented Oct 15, 2016 at 7:01
  • What do you mean by "place + and - button in proper place"? Commented Oct 15, 2016 at 7:03
  • I have explained in my post. Commented Oct 15, 2016 at 7:03

4 Answers 4

Reset to default
3

I think this should help

Edited with look of '+' '-' buttons you asked for:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello</h1>
    <div class="form-group" id="intro-box">
        <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
        <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);">
    </div>
    <script>

        function addMore(i) {

            $("#plus").remove();

            $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
            '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
            '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>');
        }

        function removeThis(j) {
            $("#introlabelname" + j).remove();
            $("#minus" + j).remove();
        }
    </script>
</body>
</html>

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

10 Comments

What are you using bootstrap for here?
@Tibrogargan it is the bootstrap that is provided in the question.
The bootstrap code isn't relevant to the question (and it's in the off-site code, not the question) - all it's doing is clouding your answer, plus I think it's maybe causing your snippet to fail.
@Tibrogargan Please read the question, he knows how to append and remove DOM elements. Here i need , initially one text field and + button. when user will click on plus(+) button below the first text field one new text field will create with different id(i.e-introlabelname2) and one plus ,minus button will create and the first text field will remain with minus button. suppose user will click on minus button of the second text field that particular field will erase and again plus button will remain with first text field and so on.
Perhaps you didn't notice I answered the question. Your snippet is still throwing errors
|
2

Same thing, using .clone(). Be aware of changes to the HTML to add a div that identifies the elements to clone as a "template" and removal of your onclick

function init() {
  $(document).on('click', '.btn-success', function() {
    var clone = $('#template').clone();
    $('#intro-box').append(clone);
    clone.find('.btn-danger').show();
  });

  $(document).on('click', '.btn-danger', function() {
    $(this).parent().remove();
  });
}

$(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="form-group" id="intro-box">
    <div id="template">
      <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
      <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
      <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
    </div>
  </div>
</body>

Improve this answer

2 Comments

@ Tibrogargan : after click on first + button when second text field will create - button should remain with first text field.
@subhra Your requirements are very unclear. You give no indication of what the minus button is supposed to do and having multiple plus buttons that all do exactly the same thing is not good design, I really don't want to put further effort into this. The changes you are asking for here are very easy to do. It's time for you to write some of your own code.
0

Use .ready(), define addMore function within .ready() handler; substitue .click() for attribute event handler onclick; attach click event to #minus element; check .length of "[name=introlabelname]" elements at click of both #plus, #minus elements; pass boolean result to .toggle() #minus button if elements .length is not greater than 1 at click at #minus button; remove last "[name=introlabelname]" element at click of #minus element; substitute class="form-control introlabelname" for id="introlabelname"

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello</h1>
  <div class="form-group" id="intro-box">
    <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
    <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
    <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
  </div>
  <script>
    // Code goes here

    $(function() {
      function toggle() {
        $("#minus").toggle($("[name=introlabelname]").length > 1);

      }
      function addMore() {
        $('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
        toggle()

      }
      function removeOne() {
        $("[name=introlabelname]").last().remove()
        toggle()
      }

      $("#plus").click(addMore);
      $("#minus").click(removeOne)
    })
  </script>
</body>

</html>

plnkr https://plnkr.co/edit/6ekAL50B6j76FUWcVVhU?p=preview

Improve this answer

2 Comments

and each text field id is same.
@subhra See updated post. Removed initial call to addMore() without click
-1

Read this http://www.w3schools.com/howto/howto_js_todolist.asp

Now that you want to create an input field with a different id, you can set a new variable to do that.

for example:

one script tag:

var n=1;

Another script tag:

document.getElementByid("btn").addEventListener("click",add(),false);

function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}

I didn't test this code. But you try something similar to this.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.