CODEWITHSUNDEEP
javascriptreplace
Frederik Vrålstad
Frederik Vrålstad

Reputation: 13

How to remove a input element with JavaScript replace()

It seems like the replace() method doesn't work when I ask it to remove an input-element inside a <p></p>.

Other HTML-elements like <br> will be removed when by itself.

var message = document.getElementById('message');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');

firstname.onclick = lastname.onclick = removeInput;

function removeInput() {
  var id = this.id;
  var paragraph = message.innerHTML;
  var toRemove = "<input type='text' id='inp" + id + "'><br><br>";
  var newParagraph = paragraph.replace(toRemove, '');
  message.innerHTML = newParagraph;
}
<p id="message">
   First name: <input type='text' id='inpfirstname'><br><br>
   Last name: <input type='text' id='inplastname'><br><br>
</p>

First name: <input type="radio" name="name" id="firstname">
Last name: <input type="radio" name="name" id="lastname">

Expected result: The desired input is removed.

Actual result: Nothing is removed.

Upvotes: 0

Views: 2370

Answers (3)

avdg
avdg

Reputation: 328

Just to (try to) answer your question directly without the use of replace. I set the css style of the input element to display:none.

var message = document.getElementById('message');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');

firstname.onclick = lastname.onclick = removeInput;

function removeInput() {
    var id = 'inp' + this.id;
    var element = document.getElementById(id);
    element.style="display: none;";
}
    <p id="message">
First name: <input type='text' id='inpfirstname' onchange='update()'><br><br>
Last name: <input type='text' id='inplastname' onchange='update()'><br><br>
    </p>

    First name: <input type="radio" name="name" value="firstname" id="firstname">
    Last name: <input type="radio" name="name" value="lastname" id="lastname">

Edit:

To make your code easily extendable:

function hideInputOnTrigger(id) {
    return function() {
        var element = document.getElementById(id);
        element.style="display: none;";
    }
}

firstName.onclick = hideInputOnTrigger("inpfirstname");
lastName.onclick = hideInputOnTrigger("inplastName");

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

The answer to your current question is to to change this.value to this.id , however there is another problem that var paragraph = message.innerHTML; won't regard the updated valus of input fields. check the solution here.

var message = document.getElementById('message');
      var firstname = document.getElementById('firstname');
      var lastname = document.getElementById('lastname');

      firstname.onclick = lastname.onclick = removeInput;

      function removeInput() {
        var id = this.id;
        console.log(id);
        var paragraph = message.innerHTML;
        var toRemove = "<input type='text' id='inp" + id + "' onchange='update()'><br><br>";
        var newParagraph = paragraph.replace(toRemove, '');
        message.innerHTML = newParagraph;
      }
      function update(){}
<p id="message">
First name: <input type='text' id='inpfirstname' onchange='update()'><br><br>
Last name: <input type='text' id='inplastname' onchange='update()'><br><br>
    </p>

    First name: <input type="radio" name="name" value="firstname" id="firstname">
    Last name: <input type="radio" name="name" value="lastname" id="lastname">

Upvotes: 0

mirage
mirage

Reputation: 708

I don't really know what you're trying to do, but the short answer to why it's "failing" is because your replace function is looking for single quotes (apostrophe character ') whereas the actual HTML code uses double quotes (quotation character ").

You could change your toRemove instantiation to escape the double quote (using backslashes), like so:

var toRemove = "<input type=\"text\" id=\"inp" + id + "\" onchange=\"update()\">";

but I'd recommend passing in a HTML id into your update function and using this unique id to find that element and remove it from the HTML DOM/document.

Refer to: Remove an element from the DOM from reference to element only

Upvotes: 2

Related Questions