#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3

    Javascript toggle button


    Dear all,

    I am working on a small project to learn javascript. I haven been going through varios youtube video. I am stuck on toggling
    a dynamically generated div to show and to get removed by the same button.

    Code:
    function search_field(){
        
        const first_div = document.createElement('div');
        first_div.className = 'row mb-2';
        first_div.id = 'search-id';
    
    const search = document.querySelector('#search');
    
    search.appendChild(first_div);
    And this is the button

    Code:
     <button type="button" class="btn btn-lg btn-dark text-warning" onclick="search_field();"><span class="fas fa-search-plus"></span> Search</button>
    If I click the button, the div element shows but on second click the div element should be removed. At the moment clicking again it shows div element twice
    on html page and so on and so forth.

    I hope someone can help me with that. Many thanks in advance.
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,700
    Rep Power
    9646
    You're dynamically creating that #search-id div. Why? Wouldn't it be easier to either put the results directly into #search, or to have #search-id created beforehand and put the results into that?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by requinix
    You're dynamically creating that #search-id div. Why? Wouldn't it be easier to either put the results directly into #search, or to have #search-id created beforehand and put the results into that?
    Thank you Mr requinix. Sorry I missed out the other part of the html code where the '#search' div is already hard coded. The dynamically generated div has one input field.
    Code:
    <div class="container" id="search">
    </div>
    When the button is clicked The dynamically generated html is appended to this div. But what I want is to remove the dynamically generated html when the button is clicked again.
    like a toggle action. I've looked on various websites but they usually hide the div that already hard coded rather then remove a dynamically generated html div.
    So when the button is clicked again I should be left with just a empty div as shown above.
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,700
    Rep Power
    9646
    Store the first_div somewhere persistent, then in search_field() create that div if it does not exist and remove it if it does exist.

    Like
    javascript Code:
    (function() {
    	var first_div;
     
    	function search_field() {
    		if (first_div) {
    			// remove
    		} else {
    			first_div = document.createElement('div');
    			// ...
    		}
    	}
    })();
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by requinix
    Store the first_div somewhere persistent, then in search_field() create that div if it does not exist and remove it if it does exist.

    Like
    javascript Code:
    (function() {
    	var first_div;
     
    	function search_field() {
    		if (first_div) {
    			// remove
    		} else {
    			first_div = document.createElement('div');
    			// ...
    		}
    	}
    })();
    Thank you Mr requinix for the pointer.
    This is what I've done. Not sure if thats the correct approach but it does work.
    Code:
    const search_new = document.querySelector('#search');
    
     if (search_new.firstElementChild === null){
    
        search_new.appendChild(div)
    
      } else {
    
         search_new.firstElementChild.remove();
       }
    
    }

IMN logo majestic logo threadwatch logo seochat tools logo