如何使用 JavaScript replace() 删除输入元素答案

【问题标题】：How to remove a input element with JavaScript replace()如何使用 JavaScript replace() 删除输入元素
【发布时间】：2019-05-12 20:03:51
【问题描述】：

当我要求它删除 <p></p> 中的输入元素时，replace() 方法似乎不起作用。

<br> 等其他 HTML 元素将被单独删除。

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

预期结果：删除所需的输入。

实际结果：没有删除任何内容。

【问题讨论】：

函数removeInput没有变量作为输入，那么this.value指的是什么？
this.value 给出按下的确切单选按钮的值。例如，如果按下“名字”单选按钮，this.value="firstname"。
所以你想删除输入元素并将信息传递给函数？在编写解决此问题的代码之前，让我们先有一个好的用例
@avdg 除了从段落中删除所需的输入元素之外，我不希望代码执行任何操作。你想让我解释一下我为什么要这样做吗？
只包含这个问题的用例（比如“我在输入名称时删除”）。无需添加更多内容。为了已经给出一个简短的答案，您可能想要编辑 dom 而不是使用 innerHtml 或向输入元素添加一些 css 样式。

标签： javascript replace

【解决方案1】：

我真的不知道您要做什么，但是为什么它“失败”的简短答案是因为您的替换函数正在寻找单引号（撇号字符 '）而实际的 HTML 代码使用双引号（引号字符"）。

您可以更改 toRemove 实例以转义双引号（使用反斜杠），如下所示：

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

但我建议将 HTML id 传递到您的更新函数中，并使用此唯一 id 来查找该元素并将其从 HTML DOM/文档中删除。

参考：Remove an element from the DOM from reference to element only

【讨论】：

如果您执行console.log(paragraph.indexOf(toRemove))，您会注意到值为-1，这意味着未找到“文本”——因为您搜索的是单引号而不是双引号。
这如何解决var id=this.value的定义返回输入值而不是其ID的问题？！
当您更改他的问题以添加格式时，我注意到您更改了他的 HTML。他的原始 HTML 有 First name: <input type="radio" name="name" value="firstname" id="firstname"> Last name: <input type="radio" name="name" value="lastname" id="lastname"> 值永远不会改变 - 它是一个单选按钮。 this.value 和 this.id 无论如何在运行时都是一样的（我认为）。这个 HTML 很糟糕，我不知道实际意图是什么，所以我只是指出实际错误是字符串中的引用。
感谢您的回复。我没有编辑原始帖子，其他人做了。我还将 sn-p 复制到我的答案中，所以实际上我已经回答了另一个问题：D
很抱歉，我可能将你们与我的代码混淆了。这只是一个示例代码，它只是用来说明我的问题所在。我的实际代码部分是用另一种语言编写的，只制作一些随机代码来显示我的问题更容易。您给了我为什么它不起作用的原因以及如何修复它的示例，所以这很完美！ :D

【解决方案2】：

只是为了（尝试）直接回答您的问题，而不使用替换。我将输入元素的css样式设置为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">

编辑：

使您的代码易于扩展：

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

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

【讨论】：

此解决方案要好得多，因为它消除了 mirage 解决方案突出显示的脆弱性 - 您（Frederik）输入了单引号，浏览器将它们转换为双引号。如果您（Frederik）或其他人更改了标记但忘记更新 removeInput 怎么办？没错，代码又被破解了。该解决方案消除了这种可能性，并具有额外的好处，即乍一看更容易理解，因此也更容易维护。（我仍然不喜欢 value 和 id 之间的依赖关系，但这并不是那么重要）。
@lukkea 我知道这是一种复杂的方法。但是，在我的实际代码中，输入也是按需创建的。我想弄清楚如何按需删除输入。在我的学校，他们强调需要轻松扩展代码。你可以在这里看到完整的代码：dropbox.com/s/gihsd2yazc2gi7l/index.html?dl=0（这是一个学校作业，部分是用挪威语写的）
@FrederikVrålstad 因为您知道您正在搜索的标记（以及 ID），所以最好去掉整个标记并使用此答案中给出的方法，因为我强调的原因? 但是我的评论不是对您的解决方案的批评；我在其中使用了您的名字，因此很明显，在提及您的原始问题时，我并没有指 avdg 的答案，并发表评论希望在遇到您问题中的场景时对其他人有所帮助。

【解决方案3】：

您当前问题的答案是将 this.value 更改为 this.id ，但是还有另一个问题 var paragraph = message.innerHTML; 不会考虑输入字段的更新值。 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">

【讨论】：