Как удалить элемент ввода с помощью JavaScript replace ()

Question

Кажется, что метод replace () не работает, когда я прошу его удалить элемент ввода внутри <p></p>.

Другие HTML-элементы, такие как <br>, будут удалены при удалении.

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">

Ожидаемый результат: нужный ввод удален.

Фактический результат: ничего не удалено.

Answer 1

Я на самом деле не знаю, что вы пытаетесь сделать, но короткий ответ на вопрос, почему он "терпит неудачу", заключается в том, что ваша функция замены ищет одинарные кавычки (символ апостроф '), тогда как в реальном HTML-коде используетсядвойные кавычки (символ кавычки ").

Вы можете изменить свое создание toRemove, чтобы избежать двойной кавычки (используя обратную косую черту), например так:

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

, но я бы рекомендовал передатьв HTML-идентификаторе в вашей функции обновления и с помощью этого уникального идентификатора, чтобы найти этот элемент и удалить его из DOM / документа HTML.

См .: Удалить элемент из DOM из ссылки только на элемент

Answer 2

Просто, чтобы (попытаться) ответить на ваш вопрос напрямую, без использования замены. Я установил стиль css элемента input для отображения: 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:

Чтобы сделать ваш код легко расширяемым:

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

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

Answer 3

Ответ на ваш текущий вопрос состоит в том, чтобы изменить this.value на this.id, однако есть другая проблема, что var paragraph = message.innerHTML; не будет учитывать обновленное значение полей ввода. проверьте решение здесь .

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">