Как заменить '/' на ''?

Question

У меня есть следующий код, где я пытаюсь заменить '/' на '' в элементе ввода. Но это не работает. Символ / не заменяется.

Как мне заставить это работать?

var playlistTitle = document.getElementById('PlaylistTitleInput').value;
$('#PlaylistTitleInput').text($('#PlaylistTitleInput').text().replace("/", ''));
console.log(document.getElementById('PlaylistTitleInput').value);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding" style="display: none;">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button><button id="createBtnPress">Create</button>
    </div>
  </div>
</div>

Answer 1

Доступ к значению элемента input осуществляется с помощью .val(), а не с .text(). Используйте регулярное выражение /\//g, чтобы заменить все вхождения / пустой строкой.

$('#PlaylistTitleInput').val($('#PlaylistTitleInput').val().replace(/\//g, ''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="PlaylistTitleInput" value="abc/fjk/">

Answer 2

Слушайте щелчок. Сделайте регулярное выражение, чтобы соответствовать всем слешам. Замените регулярное выражение вашей пустой строкой.

$('#createBtnPress').on('click', function() {
  var regex = /\//g;
  var formattedInput = $('#PlaylistTitleInput').val().replace(regex, '');
  $('#PlaylistTitleInput').val(formattedInput);
  console.log(formattedInput);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button>
      <button id="createBtnPress">Create</button>
    </div>
  </div>
</div>

Answer 3

Вот рабочий пример:

var playlistTitle = document.getElementById('PlaylistTitleInput').value;
$('#PlaylistTitleInput').val(playlistTitle.replace("/", ''));
console.log(document.getElementById('PlaylistTitleInput').value);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding" style="display: none;">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="Test/123">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button><button id="createBtnPress">Create</button>
    </div>
  </div>
</div>