How to use breakline for this code?

Question

in my code i'm using onclick method for a button. when i click this button dynamically it shows multiple textboxes with remove button. all this process are successfully running. but all the textboxes are displaying continuously. i want to display one textbox per line. Where i have to add br tag or /n ?

This is my code:

var button = document.getElementById('waypoint-input');

button.addEventListener("click", function() {

  var parentNode = document.getElementById('waypoints-list');

  var input = document.createElement('input');
  input.type = 'text';
  input.placeholder = 'Enter a waypoint location';
  input.id = 'waypoint' + me.waypointIndex;
  input.inputId = me.waypointIndex;
  input.name = 'waypointlist';

  input.addEventListener('input',
    function() {

      if (input.value == "") {

        var waypoint = me.waypts.filter(function(obj) {
          return obj.key === input.inputId;
        })[0];

        if (waypoint != null &&
          typeof waypoint !== "undefined") {

          var waypointIndexToRemove = me.waypts.map(
            function(el) {
              return el.key;
            }).indexOf(input.inputId);

          me.waypts.splice(waypointIndexToRemove, 1);


        }
      }
    });

  var removeInput = document.createElement('button');
  removeInput.innerHTML = 'Remove';
  removeInput.onclick = function() {
    parentNode.removeChild(input);
    parentNode.removeChild(removeInput);

    var childInputs = parentNode.getElementsByTagName('input');

    if (childInputs.length > 0) {
      for (var i = 0; i < childInputs.length; i++) {
        childInputs[i].inputId = i;
      }
    }

    if (input.value != "" && input.value != null) {

      var waypointIndexToRemove = me.waypts.map(function(el) {
        return el.key;
      }).indexOf(input.inputId);

      me.waypts.splice(waypointIndexToRemove, 1);

      for (var i = input.inputId; i < me.waypts.length; i++) {
        me.waypts[i].key = me.waypts[i].key - 1;
      }

      me.route();
    }

    me.waypointIndex--;
  }

  parentNode.appendChild(input);
  parentNode.appendChild(removeInput);

  var waypointAutocomplete = new google.maps.places.Autocomplete(
    input, {
      /*placeIdOnly : true */
    });

  me.setupPlaceChangedListener(waypointAutocomplete, 'WYPT',
    input.inputId);

  me.waypointIndex++;

}, false);

There is because 'input' element is an inline tag element, so, add a style to change the default behaviour to 'block'; input{display:block;} — ale, Jul 24 '17 at 12:04
You should wrap them inside a `div`. This way, you will have your block element and there will be a hierarchy in your HTML structure. It will also be easy to navigate — Rajesh, Jul 24 '17 at 12:17
i got ur suggestion. thank you... but imply i used parentNode.appendChild(document.createElement('br')); it's working well. **InferOn** — Clament Christopher E, Jul 24 '17 at 12:26

d2718nis · Answer 1 · 2017-07-24T12:31:51.857

1

You should also append <br> tag after each <input>:

parentNode.appendChild(input);
parentNode.appendChild(removeInput);
parentNode.appendChild(document.createElement('br'));

Or it might be better to use <div> wrapper as Rajesh mentioned:

var wrapper = document.createElement('div');
parentNode.appendChild(wrapper);
wrapper.appendChild(input);
wrapper.appendChild(removeInput);

edited Jul 24 '17 at 12:31

answered Jul 24 '17 at 12:15

d2718nis

1,279
9
13

Though your answer will solve the issue, [using
is not considered as a good practice](https://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br) – Rajesh Jul 24 '17 at 12:18
Ohhhhh woow.. Nice it's working well. Thanks for ur good response dear **d2718nis** – Clament Christopher E Jul 24 '17 at 12:23
Yeah, I think you're right, it might be better to wrap these elements in some block element and use this element as a parentNode. – d2718nis Jul 24 '17 at 12:27
Hello Rajesh i used ur suggested code by using div. but it's totally remove all the textboxes. i want to remove one by one? **Rajesh** – Clament Christopher E Jul 24 '17 at 12:42
**Clament Christopher E**, you should also change the behavior of your `removeInput.onclick` function to remove the whole `
` if you're using the second solution. Otherwise, just also remove `
` along with other elements.
– d2718nis Jul 24 '17 at 12:49
ohh kk i got it i got it.. wil try and let u know. **d2718nis** – Clament Christopher E Jul 24 '17 at 13:02
**Clament Christopher E**, if my answer resolved your problem, don't forget to mark it as the accepted one. Thanks. – d2718nis Jul 25 '17 at 16:14

How to use breakline for this code?

1 Answers1