Me gustaría agregar un div solo si aún no está allí. Estoy intentando con esto pero no funciona:
$('#method_id').on('change', function (e) { if ($(this).find("option:selected").data('method-column-id') != 1) { if ($('#column_message').next('div').length) $('#column_message') .append('<div id="warning_message" class="alert alert-danger"><strong>Warning!</strong> Installed column and method do not match</div>'); } else { $('.form-group').find('#column_message>.alert').remove(); } });Y si elimino la segunda cláusula if, se agrega cada vez que selecciono una opción que pasa primero la cláusula if
Aquí está el HTML
<!-- Warning message --> <div class="form-group"> <label for="group" class="col-md-2 control-label"></label> <div id="column_message" class="col-md-6"> </div> </div>Para verificar si existe un elemento, debe encontrar un selector que coincida solo con ese elemento y verificar si la longitud del objeto jQuery es igual a 0 o no, así:
if ($('#unique-selector').length === 0) { // code to run if it isn't there } else { // code to run if it is there }A medida que agrega div con id, puede buscar si ese div existe llamando:
if($("#warning_message").length > 0 ){ $('.form-group').find('#column_message>.alert').remove(); }else{ $('#column_message').append('<div id="warning_message" class="alert alert-danger"><strong>Warning!</strong> Installed column and method do not match</div>'); }Pero si desea tener más divisiones de alerta, puede buscar la clase "alerta" más o menos.
Otra forma sin identificación (probablemente mejor) sería usar el método children()
el if interno debería ser if ($('#column_message').next('div').length===0) o if(!$('#column_message').next('div').length)