Esto es lo único que me falta para finalizar mi proyecto, necesito saber como podría quitar una frase que el usuario introduzca por teclado, esto mediante una función activada por un botón.
Sé que una imagen vale más que mil palabras, así que dejaré una explicación gráfica de que quiero que pase.
Adelanto que ya sé que mi función borrar está mal, es por eso que pido ayuda.
Y por supuesto, el código que estoy usando:
<!DOCTYPE html>
<html>
<head>
<title>Unir con salto de linea</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div name="head" class="h">
<table>
<tr>
<form name="prueba" autocomplete="off">
<td><strong>Primera Frase: <input type="text"id="textA" /></td></strong>
<td><strong>Frase final: <input type="text"id="textB" /></td></strong>
<td><select id="sel" required>
<option value="1">Concatenar</option>
<option value="0">Borrar</option>
</select></td>
</table>
</form>
</div>
</tr>
<script>
function unirTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
var rt=document.getElementById('resultado');
var copia= document.getElementById('respuesta');
var p = t1.split(/\n/g);
var resultado = document.getElementById('resultado');
var html = "";
for (var i = 0; i < p.length; i++) {html += c1 +' '+ p[i] +' '+ c2 + "\n"; copia.innerHTML = html; }}
function limpiar() {
document.getElementById('textA').value ="";
document.getElementById('textB').value ="";
document.getElementById('textC').value ="";
document.getElementById('respuesta').innerHTML ="";
}
$(document).ready(function() {
if($(sel).val() == "0") {
$('#borrar').show();
$('#unir').hide();
} else if($(sel).val() == "1") {
$('#borrar').hide();
$('#unir').show();
}
});
$('#sel').on('change', function() {
if($(this).val() == "0") {
$('#borrar').show();
$('#unir').hide();
} else if($(this).val() == "1") {
$('#borrar').hide();
$('#unir').show();
}
});
function borrarTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
var rt=document.getElementById('resultado');
var copia= document.getElementById('respuesta');
var p = t1.split(/\n/g);
var resultado = document.getElementById('resultado');
var html = "";
for (var i = 0; i < p.length; i++) {html += p[i]+ "\n"; copia.innerHTML = html; }}
function cambia(){
document.respuesta.value.split(".").join(",");
}
</script>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="borrarTexto()" id="borrar">Borrar</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button>
<table>
<tr>
<td><strong>Contenido Medio</strong></td>
<td><strong>Resultado</strong></td>
</tr>
<tr>
<td><textarea name="textC" id="textC" cols="91" rows="33"></textarea></td>
<td><textarea id="respuesta" type="text" cols="91" rows="33" placeholder="El resultado se mostrará acá"></textarea></td>
</tr>
</table>
<br>
</body>
</html>