how to prevent appendTo method in jquery

Question

I am facing one issue in my html code please check that out below in code:

HTML :

<div class="agent_select_wrap">
    <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
        <option value="Select Category" selected="selected">Select Agent Name</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
    </select>
</div>
<div class="agent_select_wrap02">
    <div class="my_textarea"></div>
    <button>Send</button>
</div>

CSS

.agent_select_wrap {  width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 {  width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block;   height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button {  display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}

JS

$(document).on('change', 'select[name=menu-114]', function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

here is my working example https://jsfiddle.net/7j623eho/

Answer 1

Probably your problem is that you don't remove just created textarea . Try to create it in <div id='temp'> element and then remove this element just before you create new one.

$('#temp').remove();

var container = $('<div id="temp">');
$("<textarea> Hello Mr. </textarea>").appendTo(container);
$("<p>Please enter your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

Answer 2

you just need to change one line of code in javascript code.

$(".my_textarea").html("<textarea> Hello Mr.</textarea><p>Please enter your message here..!</p>");

use above code Instead of yours ..

 $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
 $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

Answer 3

I believe what you want is to create the textarea only once, and let the inline handler to handle further change, so the better way to achieve it is

var onMenuSelected = function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            console.log('Select');
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });

    // Just unbind self
    $(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);

By define the function, you can directly remove the $(document).on without remove other possible exist handlers. And the select event will only be registered once.

jsFiddle here.

Answer 4

Here we go, use the following code:

HTML

<div class="agent_select_wrap">
                     <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
                        <option value="Select Category" selected="selected">Select Agent Name</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                     </select>                    
                </div>




                <div class="agent_select_wrap02">

                    <div id="my_textarea0">

                    </div>
                    <textarea id="my_textarea">

                    </textarea>
                    <button>Send</button>
                </div>

JS

$(document).on('change', 'select[name=menu-114]', function () {
    $("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
    $("#my_textarea").html("<p>Please enter your message here..!</p>")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});