点击「按日期获取推文数量」单选按钮后如何删除指定输入框？

首先需要给「Select end period」相关元素添加容器，方便定位操作，然后修改原有yesnoCheck函数实现对应逻辑。

修改后的完整代码 #

HTML部分

<form>
  <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck">Select period <br>
  <br>
  <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck">Number of Tweets from a date<br><br>
  <div id="ifYes" style="display:none">
    Number of desired tweets <input type="number" min="1" max="20" id='yes' name='yes'><br>
  </div>


  <br>
  <img src="icon2.png"><label for="date">Select begin period:</label><br>
  <input type="datetime-local" id="Test_DatetimeLocal_Begin"><br><br>
  <!-- 给结束时间段元素包裹容器 -->
  <div id="endPeriodContainer">
    <img src="icon2.png"><label for="date">Select end period:</label><br>
    <input type="datetime-local" id="Test_DatetimeLocal_End"><br><br>
  </div>
  <input type="submit" value="Submit" class="submit">
</form>

注：原代码中两个datetime-local的id重复，这里修改为Test_DatetimeLocal_Begin和Test_DatetimeLocal_End，避免DOM操作冲突。

JavaScript部分

方式一：隐藏结束时间段区域（推荐，切换单选按钮可恢复）

function yesnoCheck() {
  const yesCheck = document.getElementById('yesCheck');
  const ifYes = document.getElementById('ifYes');
  const endPeriodContainer = document.getElementById('endPeriodContainer');

  if (yesCheck.checked) {
    ifYes.style.display = 'block';
    endPeriodContainer.style.display = 'none';
  } else {
    ifYes.style.display = 'none';
    endPeriodContainer.style.display = 'block';
  }
}

方式二：彻底删除结束时间段的input元素（删除后需手动恢复）

// 提前保存结束时间段input的引用
let endPeriodInput = document.getElementById('Test_DatetimeLocal_End');

function yesnoCheck() {
  const yesCheck = document.getElementById('yesCheck');
  const ifYes = document.getElementById('ifYes');
  const endPeriodContainer = document.getElementById('endPeriodContainer');

  if (yesCheck.checked) {
    ifYes.style.display = 'block';
    // 若input存在则删除
    if (endPeriodInput && endPeriodInput.parentNode) {
      endPeriodInput.parentNode.removeChild(endPeriodInput);
      endPeriodInput = null;
    }
  } else {
    ifYes.style.display = 'none';
    // 若input已删除，重新创建并添加到容器
    if (!endPeriodInput) {
      endPeriodInput = document.createElement('input');
      endPeriodInput.type = 'datetime-local';
      endPeriodInput.id = 'Test_DatetimeLocal_End';
      endPeriodContainer.insertBefore(document.createElement('br'), endPeriodContainer.lastChild);
      endPeriodContainer.insertBefore(endPeriodInput, endPeriodContainer.lastChild);
    }
  }
}

关键说明 #

• 给结束时间段元素加容器是为了更便捷地控制显示/隐藏，或定位要删除的input。
• 修复原代码id重复问题，避免DOM操作异常。
• 隐藏方式更符合常规交互，用户切换回「Select period」时可重新看到结束选项；若确需删除元素，第二种方式提供了删除后恢复的逻辑，但复杂度更高。

内容的提问来源于stack exchange，提问作者Justin