如何使用Javascript/Jquery添加子元素

问题描述：

我需要一个帮助.我需要使用Javascript/Jquery中的按钮单击来添加子元素.我在下面解释了我的代码.

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>

在这里我需要，最初是一个文本字段和+按钮.当用户单击第一个文本字段下方的加号(+)按钮时，将创建一个具有不同id(i.e-introlabelname2)的新文本字段，并创建一个加号，减号按钮，而第一个文本字段将保留减号按钮.假设用户将单击第二个文本字段的减号按钮，该特定字段将被删除，并且再次加号按钮将保留在第一个文本字段中，依此类推.这是我的 plunkr代码.请帮助我.

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.

答

我认为这应该有所帮助

使用您要求的'+''-'按钮进行

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>

如何使用Javascript/Jquery添加子元素

相关推荐