jQuery replace with and append

Question

I have a simple piece of code that changes a select box into a text field if the user selects yes. I then want to be able to change it back to a drop down if if the user checks the box besides the text field.

The issue however is that when it replaces the element, it doesn't append the checkbox to it.

$(document).on("change", "[name=projectRelated]", function(e) {

    // Define our values
    var prj = this.value;

    // Depending on our choice
    switch(prj){
        case 'Yes':
            $(this)
            .replaceWith($('<input/>',{'type':'text','value':'', 'name':'projectRelatedDesc', 'placeholder':'Enter project details'}))
            .append('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>');
        break;
    }
});

Here is a fiddle: https://jsfiddle.net/0ytut7ec/

What am I missing?

change append to after - input elements are known as 'void' and cannot have child elements — jonny
– jonny, Commented Mar 30, 2016 at 15:34
Depending on where you want it to appear, use after() or before() to append it before or after the element. — Twisty
– Twisty, Commented Mar 30, 2016 at 15:35

Sourabh · Accepted Answer · 2016-03-30 16:34:50Z

Try to use .after() at this context. Also the order of execution is also important.

If you add a new element after removing/replacing the target element, then that new element will not be added as the target lost its reference in DOM.

$(document).on("change", "[name=projectRelated]", function(e) {
  // Define our values
  var prj = this.value;
  // Depending on our choice
  switch (prj) {
    case 'Yes':
     $(this)
     .after('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>')
        .replaceWith($('<input/>', {
          'type': 'text',
          'value': '',
          'name': 'projectRelatedDesc',
          'placeholder': 'Enter project details'
        }))
      break;
  }
});

DEMO

$(document).on("change", "[name=projectRelated]", function(e) {
  // Define our values
  var prj = this.value;
  // Depending on our choice
  switch (prj) {
    case 'Yes':
      $(this).after('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>').end()
        .replaceWith($('<input/>', {
          'type': 'text',
          'value': '',
          'name': 'projectRelatedDesc',
          'placeholder': 'Enter project details'
        }))
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="span2" name="projectRelated">
  <option value="">Select Option</option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

Hello, so this isn't working as intended. The goal is to replace the drop down with a text input field and then after that append a checkbox which I will program to bring the drop down back if they check it. If they select Yes, I change it to an input field so they can describe it, just need the checkbox so they can go back to "No" if needed.
@SBB .end is not required at this context. I wrongly used that. Fixed it. check it now. jsfiddle.net/0ytut7ec/2

Twisty · Accepted Answer · 2016-03-30 15:50:20Z

Offering an alternate answer: https://jsfiddle.net/Twisty/6mx4r3s8/

$(document).on("change", "[name=projectRelated]", function(e) {

  // Define our values
  var prj = this.value;

  // Depending on our choice
  switch (prj) {
    case 'Yes':
      var $inp = $('<input/>', {
        'type': 'text',
        'value': '',
        'name': 'projectRelatedDesc',
        'placeholder': 'Enter project details'
      });
      var $chk = $('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated">No</label></div>');
      $(this).replaceWith($inp);
      $inp.after($chk);
      break;
  }
});

Here we create the input and the checkbox, replace, and then append after.

Collectives™ on Stack Overflow

jQuery replace with and append

2 Answers 2

DEMO

2 Comments

Comments

Hot Network Questions