We Keep Coding

Using parent() and other functions, remove a div from a list

I am looking to create a chart that generates a series of rows. Each row contains various buttons and text boxes. The row in question is this. Yes, I am using a bunch of divs instead of a list. No, I'm not going to change it at this time as I'm strictly hacking this stuff together so it works, not so it's semantically usable. This is an internal tool, intended for internal use only, and doesn't need to be perfectly semantic, nor does it need to be used by screen readers. I've also removed irrelevant information/names/labels/classes.
<div class="row">
<div class="rcColumn">
<button></button>
</div>
<div class="accColumn">
<input></input>
<button>Copy</button>
</div>
<div class="dollarColumn">
<input></input>
<button>Copy</button>
</div>
<div class="toolbar">
<button>Clear</button>
<button id="deleteLineButton" onclick="deleteLine();" title="Delete this line">X</button>
</div>
</div>
Yes, I'm aware it's not really good to use onclick in the HTML tags, but I am because again, whipping this up quick. I slowly make things more and more clean over time but for now I'm making it work. Don't kill me over it.
That said, the function I made is as follows:
function deleteLine() {
$("#deleteLineButton").parent().parent().remove();
}
Now, there are functions I created that make a new line, effective adding that HTML exactly underneath. It works fine. However, while deleteLine() appropriately deletes the topmost div in the HTML example, it always goes for the topmost line, no matter how many new lines I make.
I tried making an alternate version like so:
function deleteLine() {
$(this).parent().parent().remove();
}
But that doesn't work either. I also tried using "this" instead (with quotes), but still no dice. The delete line button no longer works, and I get no error in the console.
I don't want to use IDs or Classes because I might make an arbitrary amount of lines. How can I better select the appropriate row? Was I on the right track using 'this'?

Change the button id to a class since ids must be unique
<button class="deleteLineButton" title="Delete this line">X</button>
Then rather than using outdated inline onclick you can add a jQuery event listener that traverses to closest('.row') which is more understandable to read than chaining parent().parent()
$('.deleteLineButton').on('click', function(){
$(this).closest('.row').remove()
})

How to capture clicked element using $(this) inside of a vue(js) instance

I am reworking an old app of mine and I am having issues with dom manipulation and basic selections within a vue instance.
Essentially I have information in a database that I load in via ajax.
Each record in the db has 2 sections. The header tab(title, time, date etc) and the body of the record(notes, ideas, etc)
When loaded, the header shows normally to the user but if they want to see what that note contains, they have to click on the header for the bottom to appear.
consider the following html:
<vuejs for loop>
<div v-bind:id='item._id' class="tabW" v-on:click="blueTabClick" >
<div class="blueTabMainColor">
<!-- header stuff here -->
</div>
<div class="notesOpenedW">
<!-- interior informaton here, HIDDEN BY CSS -->
</div>
</div>
<vuejs for loop ender>
This HTML is essentially inside a Vue for/loop directive, and generates however many "tabs(tabW)" as needed based on how much info I have in the DB
All I want the user to do is to be able to click whichever tab(tabW) they want information on, and for the notes show underneath(notesOpenedW).
I stripped my entire app and js and tried to keep it as simple a test as possible and even with the below, I still can't get anything.
here is my JS(JQ):
$(document).ready(function(evt){
$(".blueTabMainColor").click(function(){
$(this).next(".notesOpenedW").fadeToggle();
});
});
With this basic code, when I put it inside a Vue instance, via:
methods: {
blueTabClick: function (evt) {
evt.preventDefault();
$(".blueTabMainColor").click(function(){
//alert("you clicked me");
$(this).next(".notesOpenedW").fadeToggle();
});
}
}
It doesn't work, but if I take it out of the Vue instance, it works just fine.
how can I get this to work? or am I going about it the wrong way?

Vue will not cohabit happily with JQuery. You're $(this) will not work because you're not even in the document at that point, you're in pure js, virtual DOM, another universe. Then, if it did, the event listener you call may not exist. You will need to fundamentally transition this code to Vue if you want it to work, I fear.

You can achieve this by setting a ref on "notesOpenedW".
https://v2.vuejs.org/v2/api/#ref
I would strongly recommend to wrap this behaviour in a dedicated component
That would have the following content :
<div class="tabW" v-on:click="blueTabClick" >
<div class="blueTabMainColor">
<!-- header stuff here -->
</div>
<div class="notesOpenedW" ref="notesToggleDiv">
<!-- interior informaton here, HIDDEN BY CSS -->
</div>
</div>
And the method :
methods: {
blueTabClick: function () {
$(this.$refs.notesToggleDiv).fadeToggle();
}
}
Be aware that when using Vue, manipulating directly the dom is usually a bad idea.
As i showed you, it is possible to use jQuery with Vue if you absolutely need it (or cannot afford to rework more deeply your application).
Edit : Just found this article that i think would help you a lot :
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Vue.js%20Developers

$(.class).empty always missing one element

enter code hereI am having a little problem with jquery.empty().
I have some Html Divs which look like below:
<div id="Description_Error" class="ui-helper-hidden errorMessage"></div>
<div id="Order_Error" class="ui-helper-hidden errorMessage"></div>
<div id="ColorHex_Error" class="ui-helper-hidden errorMessage"></div>
These Divs get filled up at run time with some Uls and Lis. They are basically used to show the errors. Now I am wiping out all the errors that it was showing before I do a POST.
I use
$('ui-helper-hidden errorMessage').empty();
for that. Now, i fit is showing all three errors then it will wipe out two bue leave one. If it is showing only one error at the time then it will not be removed at all. I am not sure why class selection decides to leave one element behind all the times. Anyway, i tried to replicate the same behavior on Jsfiddler but it works fine. I am not able to find a clue on what might be wrong on my code. Any suggestions?
here is the fiddler link which works all file. Just my HTMl code does not work fine:
http://jsfiddle.net/g55Rs/3/

You are neither refering to a class nore an element identifier.
$('ui-helper-hidden errorMessage').empty();
To reference classes use the . and to use element identifiers use #.
In your case this will empty all the divs:
// Selecting all elements which have both classes
$('.ui-helper-hidden.errorMessage').empty();
DEMO - Empty all element which have both classes
I also added some element which only have one or the other class in the DEMO to show that they are not effected.

Fade in, fade out div with images and text (with jquery)

What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?

It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.

You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});

Weird margin when using .prependTo()

I've got some trouble in understanding the following behavior. I'm having a container <div> which contains a few inline-block <div> nodes. Example view:
Now my requirement is, to prepend new foobar inline-block <div> elements. No Problem, using jQuery -> .prependTo() to the rescue(applied on the parent container). Now comes the issue, the first time using .prependTo() "something, somewhere" creates an untrackable margin on the right side from the newly inserted element (it lookes like this to me). Example:
As you can see, only the very first element has this margin (again, I cannot track the space using Firebug/DevTools, it seems like its not there). All further insertions are just fine. Using .insertBefore() on the very first element also works fine and looks great. Unfortunatly I cannot use .insertBefore() in my particular usecase, that is why I'm asking for some heads-up here.
What do I miss ? Where comes this strange margin/spacing from ?
How to avoid it ?
Here is the jsfiddle playground where the above images come from:
http://jsfiddle.net/r7d6s/
I only tested on Firefox 4/5/6 so far.

It's the whitespace inside your parent div (i.e. line break). It gets sanitized to an ordinary space by HTML renderer. Remove it:
<div id="area"></div>